面向移动终端的屏幕自适应网页设计
来源：微型机与应用2014年第3期
作者：洪勇军
摘& 要： 分析了的基本原理，系统阐述了综合运用技术与设计屏幕自适应网页的方法，探讨了使用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）{
&&&&&&& 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）{
&&&&&&& 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：///article/fluidgrids.
[2] Ethan Marcotte. Responsive Web Design[E/OL]. http：///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.
继续阅读>>
热门关键词14029人阅读
android学习（31）
& & &&Android布局之屏幕自适应
&&&&&&&& 在做应用时发现程序没有屏幕自适应功能，变换手机使用之后，界面就很混乱了，字体也很奇怪。经过百度的帮助，找到自适应方法。
1&&&&&&&&&&字体的自适应
这里又有关于Android下表示大小的单位的相关知识。
下面列出几种表示单位：
<span style="color:#.1&&&&&dip: device independent pixels(设备独立像素).
不同设备有不同的显示效果,这个和设备硬件有关，一般我们为了支持WVGA、HVGA和QVGA
（WVGA=800x480，HVGA=480x3<span style="color:#, QVGA=320x240）推荐使用这个，不依赖像素。
<span style="color:#.2&&&&&px: pixels(像素).
不同设备显示效果相同，一般我们HVGA代表<span style="color:#0x480像素，这个用的比较多。
<span style="color:#.3&&&&pt: point，是一个标准的长度单位，<span style="color:#pt＝<span style="color:#/72英寸，用于印刷业，非常简单易用；
<span style="color:#.4&&&&sp: scaled pixels(放大像素).
主要用于字体显示best for textsize。可以根据用户的字体大小首选项进行缩放
根据上面对单位的分析，使用sp为单位就可以实现自适应字体大小啦。亲测，比较好用。
在你的res文件夹中创建一个文件夹，叫做values-320x240。其中320x240是你手机屏幕的分辨率，根据你手机屏幕的情况做不同的命名，例如values-800x480。在该文件夹下创建一个dimens.xml文件，定义各种字体的大小。那么系统就会自动根据你手机屏幕的分辨率去调用响应的文件夹。
&&&另外，&#20540;得提醒的是，记得在你默认的values文件下的dimens.xml文件中也要写上相应的字体大小哦，因为当系统无法认识你手机屏幕大小的时候，它会自动去找你默认文件中的东西，没有写的话程序会崩溃。
2&&&&&&&&&&布局自适应
下面的介绍，就是今天让我几度抓狂的东西。
首先先介绍百度告知的几种自适应的方法：
2.1&&&&&&&&&不同的layout
&&&&&& Android手机屏幕大小不一，有480x320,640x360, 800x480,854x480.怎样才能让App自动适应不同的屏幕呢？&其实很简单，只需要在res目录下创建不同的layout文件夹，比如layout-640x360,layout-800x480,所有的layout文件在编译之后都会写入R.java里，而系统会根据屏幕的大小自己选择合适的layout进行使用。&但是需要注意的是根据分辨率添加layout文件时，layout这个原来的文件夹及资源一定要存在，否则会出现错误。同时在命名layout文件夹时,必须遵守这样的规则.layout-640x360
大数放在小数的前面,否则会报错。下图为需要定义的文件夹和文件：
drawable-hdpi、drawable-mdpi、drawable-ldpi的区别：&
(1)drawable-hdpi里面存放高分辨率的图片,如WVGA (480x800),FWVGA (480x854)&
(2)drawable-mdpi里面存放中等分辨率的图片,如HVGA (320x480)&
(3)drawable-ldpi里面存放低分辨率的图片,如QVGA (240x320)&
备注：三者的解析度不一样，就像你把电脑的分辨率调低，图片会变大一样，反之分辨率高，图片缩小。
2.2&&&&&&&&&利用weight属性
保证页面的布局随着屏幕的大小变化而变化，最好使用相对布局方式，少使用绝对赋&#20540;。
将你控件的layout中的width、height设置为fill-parent，不要使用wrap——content。因为wrap-content的大小是不固定的。而weight（权重）这个属性很好的解决了这个问题。当包裹在控件外面的Layout的width、height属性都设置为fill-parent时，可以利用weight的反比特性。即如果控件A设置weight为9，控件B设置weight为20，那么A所占的空间为20/（9&#43;20），B所占的空间为9/（9&#43;20）。这样的反比属性对任何分辨率下的手机都是合适的。
这种方法虽然解决了自适应问题，但是在我使用的时候发现我有需要使用wrap_content属性的时候，就会出现layout无法填满的现象。（也有可能是我的布局有问题）。
2.3&&&&&&&&&在程序中制定
获得屏幕的大小，在程序中设置height和width属性。
//得到屏幕的高度
Int heigh = (Activity)m_context).getWindowManager().getDefaultDisplay().getHeight();
textview.setHeight((int)( heigh /14);
这种方法感觉不太适合复杂布局，但是我正在编写的应用时够了~
以上各种总结可能会有错误，以后发现会积极改正。经过一天乱七八糟的抓狂编程，觉得自己还是没有细细的去研究这些要点，而且使用非常死板，没有灵活运用API。
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：168502次
积分：2042
积分：2042
排名：第12306名
原创：37篇
转载：23篇
评论：40条
(1)(1)(2)(5)(12)(2)(5)(9)(6)(1)(6)(11)