摘  要： 分析了屏幕自适应网页设计的基本原理，系统阐述了综合运用媒体查询技术与流式布局设计屏幕自适应网页的方法，探讨了使用PC浏览器测试网页屏幕自适应性的简便方法。
关键词： 屏幕自适应网页设计；媒体查询；流式布局

　目前，为了给所有用户带来一致的浏览体验，在Web应用系统开发实践中，普遍采用固定宽度网页设计模式，也就是先按照最常用的终端屏幕尺寸设定网页宽度，设计网页中各元素。制作出来的网页在传统的台式机、笔记本电脑屏幕上均能带来较好的效果。但是，近年来智能手机、平板电脑等各类新型设备不断涌现，使固定宽度网页设计模式面临越来越大的挑战：这些设备的屏幕尺寸普遍比较小，所支持的分辨率也千差万别，显示方向还可切换。大多数原来按固定宽度模式设计的网页在很多新型设备上的显示效果都不好，而针对各种不同类型屏幕分别制作网页的成本又太高。
　2009年3月，MARCOTTE E探讨了在Web布局网格中引入百分比宽度以实现流式布局的基本原理[1]；2010年5月，在此基础上，他又正式提出了响应式Web设计这一理念，即借助媒体查询技术自动检测屏幕分辨率并有选择地加载CSS规则、同时结合流式布局方法，实现网页对屏幕的自适应处理[2]。此方法一经提出，受到了业界的广泛关注，在开发实践中得到了越来越多的应用，并进一步得到了不断的完善与发展。
1 屏幕自适应网页设计的基本原理
　为了更好地实现内容与表现的分离，目前的网页通常都是综合应用HTML和CSS进行设计，HTML标记决定网页内容，CSS规则控制网页效果。因此，要让相同的网页能自动适应不同大小的终端屏幕，关键在于针对不同分辨率的屏幕分别设计不同的CSS规则，让浏览器加载网页时先检测屏幕分辨率并自动选用合适的CSS规则渲染网页。
　目前各种新型设备不断涌现，所配屏幕的物理尺寸越来越大，屏幕分辨率也越来越高，直接导致了应用开发实践中屏幕适配复杂度越来越大。幸运的是，对网页布局效果起决定性作用的是网页可用的CSS像素宽度，为尽可能保证老网页在新设备中也能较好展现，降低CSS设计难度，当前主流手机浏览器都采用了将CSS像素与设备屏幕物理像素相分离的方式，将高分辨率设备中的多个物理像素映射为一个CSS像素。这样，物理像素参数差别很大的设备中CSS像素宽度参数完全可能是相同的[3]。例如iPhone的屏幕物理像素规格为320×480，iPhone4/iPhone4S的屏幕物理像素规格为640×960，但其手机浏览器中所用的CSS像素规格均为320×480。iPhone4/iPhone4S中4个物理像素被映射成了1个CSS像素，这样，在设计网页时，iPhone、iPhone4/iPhone4S事实上可以看作同一种设备进行适配。
　为进一步降低CSS设计难度，可以将CSS像素宽度接近的几种设备归为一组统一处理。为使同一组CSS规则能适应分辨率接近的几种屏幕，在使用CSS进行网页布局时，也必须采用不同于固定宽度网页设计的方式，网页元素宽度不能使用固定像素的方式指定，而应使用比例宽度，使其能自动缩放，对于部分可能超出屏幕宽度的网页元素应根据实际情况关闭其显示或允许其浮动。
要达到上述效果，需要综合使用媒体查询与流式布局技术。
2 屏幕自适应网页设计的关键技术
2.1 媒体查询
　媒体查询是CSS3中定义的一个附加模块，可用于检测一些常用的媒体特征，已经得到绝大多数桌面及手机浏览器的良好支持。
　一个媒体查询通常由一个媒体类型声明和至少一个借助媒体特征来限定样式表作用范围的表达式组成。常用的媒体类型包括screen、print等，其中screen代表计算机/手机屏幕，print代表文档打印或打印预览屏幕。媒体查询可检测的常用媒体特征主要包括设备宽度（device-width）、设备高度（device-height）、显示区域宽度（width）、显示区域高度（height）、设备方向（orientation）、设备宽高比（device-aspect-ratio）、显示区域宽高比（aspect-ratio）等[3]。
　媒体查询的基本形式如下所示：
@media screen and（max-width：480px）and（min-width：320px）{
    body{
        background-color：lightyellow；
}
……
}
　根据以上规则，如果屏幕CSS像素宽度介于320~480之间，则将页面背景色设置为浅黄色。
2.2 流式布局
　所谓流式布局是相对于目前广泛采用的固定布局来说的。固定布局使用固定宽度（如960像素）的容器，内部各个部分使用百分比宽度或固定宽度（通常使用固定宽度）来表示。由于最外层的容器宽度是固定不变的，所以不论访问者的浏览器分辨率是多少，他们所看到的网页宽度都是一样的。而流式布局则不同，主要使用百分比来设置各个部分的宽度，结合CSS中的元素浮动属性（float），可以让网页中的元素根据页面宽度变化自动调整自身宽度及位置，以适应不同的屏幕分辨率。
　另外，为使网页能更好地适应各种屏幕，使用流式布局时页面中的字体尺寸也应使用相对尺寸。通常的做法是在CSS中先以像素形式为body标签指定一种字体大小作为基准，然后在其他需要指定字体大小的地方都以em作单位。em是相对大小单位，其实际大小是相对于其上下文字体大小而言的。例如若指定某元素字体大小为1.5 em，则表示该元素字体大小应为其上下文（所在容器）字体大小的1.5倍，依此类推。采用这种方式，如果需要整体改变网页中字体大小，就只需要修改作为基准的body标签中字体属性即可[4]。
3 设计屏幕自适应网页的基本步骤
3.1 调查目标终端屏幕特性
　结合项目特点，分析项目主流用户可能使用的终端设备的屏幕特性，主要包括屏幕的分辨率、方向等。具体说来，一方面，由于对网页渲染效果影响最大的是浏览器所用CSS像素宽度，并非设备物理像素宽度，调查时需要重点了解设备的CSS像素宽度；另一方面，手机通常是竖屏使用，而平板电脑则通常是横屏使用，在考虑设备屏幕宽度数据时需要注意。
3.2 划分分辨率范围
　目前各类终端的屏幕分辨率特性千差万别，具有更高分辨率的新设备不断涌现。所幸的是目前高分辨率设备中使用的浏览器通常都作了像素映射处理，使得浏览器中使用的CSS像素宽度参数复杂度有所降低。现阶段在移动Web开发实践中需要重点关注的设备CSS像素宽度主要包括320、360、480、540及640。
3.3 结合媒体查询设计CSS规则组
　首先针对最常用的设备屏幕设计默认的CSS规则组，然后根据分辨率范围分组的结果，使用媒体查询定义相应的查询表达式，并为符合特征要求的一组屏幕定义匹配的特定CSS规则如下所示：
@media screen and（max-width：320px）{
body{
        Font-size： 14px；
        Font-size： 1em；
        Background-color： lightyellow；
        ……
    }
    ……
}
@media screen and （min-width： 321px） and （max-width： 360px）{
    ……
}
……
　另外，在具体页面的CSS规则设计过程中，应贯彻只为最外层容器指定像素宽度，其余元素均使用百分比宽度的原则，在指定字体时，也只为最外层容器（通常是body）指定像素尺寸，其余元素的字体一律使用相对大小单位em。同时，对于在同一分辨率范围内部分情况下可能超出屏幕宽度的元素可以设置float或display属性，使其在屏幕宽度范围内自动浮动或干脆隐藏这些元素。
3.4 网页屏幕自适应性的测试

　要测试网页的屏幕自适应性设计效果，最理想的方式是直接使用特定的目标设备来访问相关网页，但这种方式在很多时候由于各种原因是不可行的。更可行的方式是在通用PC浏览器中借助某种视口调试工具来完成测试。以在Web开发者中使用较广泛的Firefox浏览器为例，可以直接使用其内置“Web开发者”工具组中的“自适应设计视图”工具。启用“自适应设计视图”以后，Firefox将会显示一个视口大小下拉列表，用于指定查看网页时的视口大小以模拟特定类型屏幕，这样就可以直观地观察网页在不同屏幕上的实际效果。
随着移动互联网的快速发展，来自各类移动设备对Web系统的访问所占比重越来越高，市场对能满足移动设备访问要求的屏幕自适应Web系统的需求也越来越大。
　目前已经得到广泛支持的媒体查询技术，结合流式布局可以较低的成本设计出能自动适配各类屏幕的网页，为各类设备提供良好的访问体验。当然，这种方法也存在一定的不足，在部分情况下页面效果不如针对特定屏幕专门设计的网页好，有些时候网页元素还可能会存在一定的变形。
参考文献
[1] Ethan Marcotte. Fluid Grids[E/OL]. http：//alistapart.com/article/fluidgrids.
[2] Ethan Marcotte. Responsive Web Design[E/OL]. http：//alistapart.com/article/responsive-web-design.
[3] CSS media queries[E/OL].https：//developer.mozilla.org/en-US/docs/CSS/Media_queries.
[4] Ben Frain.响应式Web设计：HTML5和CSS实战[M].王永强译.北京：人民邮电出版社，2013.