如果你曾经创建过网站的打印样式，那么你应该知道可以通过设置css2的media type为print去实现打印，下面是两个关于media type的简单应用
//example1
≪link rel="stylesheet" type="text/css" media="screen" href="sans-serif.css">
≪link rel="stylesheet" type="text/css" media="print" href="serif.css">
//example2
@media screen { * { font-family: sans-serif } }
而打印功能或者正是你所知道的关于media type的所有用法，由于仅仅是对于打印设备的支持，所以我们很少可以在样式文件中看到media type也就不足为奇了。手持设备的流行和css2 media type的局限性使得人们在css3中定义了Media Queries，它是media type的一种延伸，不过相对于前辈，它的功能强大多了，除了可以为不同的设备选择一种适当的类型之外，它可以检查所有的事情，包括：
浏览器窗口的高度和宽度
设备的高度和宽度
方向，例如iphone手机是横向还是纵向
分辨率
也就是说，如果用户的浏览器支持css3 Media Queries，那么我们就可以专门为某些情况编写相关的css，例如：如果检测到用户使用了像iphone或者ipad这样的设备，那么将可以为它们呈现一个特定的布局。
使用Media Queries为智能手机或者平板电脑增加相应样式
我们可以为智能手机或者平板电脑的布局样式增加相应的css代码，如果你整站都是使用一个样式文件的话，则可以通过在样式文件增加以下语法格式的css代码：
@media only screen and (max-device-width: 480px) {
//在这里填写专门为小屏幕设备设置的样式，例如不同的宽度、高度，不同尺寸的图片等等
}
引用一个单独的Media Queries样式文件
除了修改原有的样式文件来实现对智能手机的支持外，我们还可以将Media Queries样式单独保存为一个独立的文件，然后在页面引用则可。
≪link rel="stylesheet" type="text/css"
media="only screen and (max-device-width: 480px)"
href="small-device.css" />测试media queries
改造完后，我们需要测试，看一下media queries是否生效。如果你自己拥有一台iphone或者android手机，那么只需要用该设备访问要测试的网站就可以了，但如果没有这些设备的话，那怎么办？我将隆重为你介绍一个非常优秀的模拟media queries测试网站：protofluid，只需要访问该网站，然后设置模拟设备（包括手机、平板、显示器、电视等，而每一种设备都对应有不同的产品可供选择），最后输入要访问的网站链接（包括本地的链接）回车后就可以看到实际效果了。
静态网页制作步骤：
第一步：制作一个静态网页之前，我们需要先制作一个网页1:1的效果图，又称静态网页效果图。制作静态网页效果图可以使用Photoshop CS4破解中文版制作。
第二步：将制作好的静态网页效果图进行PS切片。通过PS切片可将一张大的效果图切成多张小图片，以后可直接用在网页上。
第三步：使用HTML5和CSS3进行网页布局，网页布局遵从“先大后小，先外后里”的原则，先将整个静态网页大结构写出来，然后再按照效果图写各个部分的小版块。（这个部分需要有代码基础，可先学习HTML入门教程）
第三：制作网页上的特效，例如轮播图，需要使用JS代码制作。再将PS切片出来的小图片通过代码插入网页中，并且使用测试数据填充各个小版块，达到与效果图一样的效果。
第四：最后优化网页代码，删除冗余的文件，整理出一个简洁的静态网页，这样静态网页就制作好了。
扩展资料：
静态网页是标准的HTML文件，它的文件扩展名是。htm、.html，可以包含文本、图像、声音、FLASH动画、客户端脚本和ActiveX控件及JAVA小程序等。我们就叫做静态页面。
静态页面一般都是html格式，鼠标双击这个静态页面，就可以打开这张网页，效果会跟图片设计的效果一样。那么这个静态页面就是一个网站了吗？这些静态页面其实只是做网站或者做模板的材料而已。
在网站设计中，静态网页是网站建设的基础，早期的网站一般都是由静态网页制作的。静态网页是相对于动态网页而言，是指没有后台数据库、不含建站程序和不可交互的网页。静态网页相对更新起来比较麻烦，适用于一般更新较少的展示型网站。
第一种：用vw和vh,
1vw 的意思就是把屏幕的宽分成一百分后中的一分，也就是1%
vh 指高度，同上。
第二种：用bootstrap吧，bootstrap是一款CSS框架插件，自适应上做的很好，
比如，我们做一个DIV，让电脑端显示为三列，手机端显示一列，可以这样：
<div calss="row"><div class="col-md-3 col-12">第一列</div>
<div class="col-md-3 col-12">第二列</div>
<div class="col-md-3 col-12">第三列</div>
</div>
row表示行，col表示列，
col-md-3 表示在屏幕宽大于768时，分成12列中的三列，
col-12 表示屏幕宽在小于576时，分成12列，占全12列，也就是表示一整行的意思，
另外还有其它的单位，如 sm lg xl 等，都表示不同浏览器的宽度。
希望以帮助到你！
