响应式Web设计（三）：响应式Web设计的方法.docx

响应式Web设计(三):响应式Web设计的方法介绍完响应式Web的背景和概念之后,是时候该介绍具体的实现方法了,其实响应式Web设计的方法很简单,就是利用CSS3的媒体查询MediaQueries和Viewport来解决问题的。首先我们一起来看看MediaQueries,这里我只会对其做一个简单的列举介绍。(有兴趣深入的同学可以参考:l/ig/zh/wiki/CSS3%E5%AA%92%E4%BD%93%E6%9F%A5%E8%AF%A2) 通过媒体查询的设置,我们可以根据屏幕宽度、屏幕方向等各个属性来加载不同场景下不同的CSS文件来渲染页面的视觉风格。具体的使用方法有以下两种: 通过link标签: ? 示例代码代表当当前屏幕宽度小于479px的时候,。 CSS中直接设置: ***@mediascreenand(max-width:479px){/*具体的CSS属性设置*/} 对于MediaQueries的一些常用属性,只对常用的几个做一个简单列举说明,其他的属性请各位自行查阅相关资料: width:描述终端设备显示区域的宽度,接受max/min的前缀; height:描述终端设备显示区域的高度,接受max/min的前缀; device-width:描述终端设备屏幕的宽度,接受max/min的前缀; device-height:描述终端设备屏幕的高度,接受max/min的前缀; orientation:描述终端设备处于横屏还是竖屏的状态,取值分别为:landscape/portrait。当我们调整浏览器大小的时候,上面通过媒体查询属性的操作就可以完成响应式Web设计的工作,但是这却不能满足移动终端的浏览器,因为移动浏览器默认页面是为宽屏幕设计的,所以会把他缩小来适应小屏幕,但是终端设备却无法识别正确的宽度,所以光靠媒体查询是解决不了移动终端设备的响应式Web设计的。这个时候就必须使用viewport的meta标签来做一系列的设置,同样,下面我只给出一个简单列举说明,有兴趣的同学可以参考一些网上资料进行深入性的研究。正常我们需要响应式Web设计的页面,在页面中都要加上viewport的设置: width=device-width:控制viewport的宽度,可以指定固定的值或者特殊的值,如device-width(设备宽度)。但是这个么设置有一个弊端,因为这个设置只有在竖屏状态下有效,横屏状态下,返回的却还是和竖屏状态下一样的宽度。 initial-scale=:告诉浏览器初始化页面时不要对页面进行任何缩放的操作。 maximum-scale=:告诉浏览器阻止页面放大,但是这样一来也禁止了用户手动放大或缩小页面,怎么说呢,美好的东西也会存在缺陷吧。 minimum-scale=:告诉浏览器阻止页面缩小,同样带来上面的问题。 user-scalable=no:告诉浏览器禁止页面缩放。 target-densitydpi=device-dpi:分辨率的设置,通常可以取值:device-dpi(使用设备自身的dpi作为目标dp,不发生缩放)、high-dpi(使用高分辨率,中低分辨率场景下会相应缩小)、medium-dpi(使用中等分辨率,高低分辨率分别进行相应的放大和缩小,缺省值)、low