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

精品文档
精品文档
1
精品文档
介绍完响应式 Web的背景和概念之后，是时候该介绍具体的实现方法了，其实响应式
Web设计的方法很简单，就是利用CSS3的媒体查询MediaQueries和Viewport来解决问题的。
首先我们一起来看看深入的

MediaQueries，这里我只会对其做一个简单的列举介绍。
同 学 可 以 参

（有兴趣
考 ：
精品文档
精品文档
3
精品文档
%E5%AA%92%E4%BD%93%E6%9F%A5%E8%AF%A2）
通过媒体查询的设置，我们可以根据屏幕宽度、屏幕方向等各个属性来加载不同场景下不同的CSS文件来渲染页面的视觉风格。具体的使用方法有以下两种：
通过link标签：
?
精品文档
精品文档
3
精品文档
<link rel="stylesheet"

type="text/css"

media="screen

and (max-width:

479px)"
精品文档
精品文档
3
精品文档
href=""/>
精品文档
精品文档
3
精品文档
示例代码代表当当前屏幕宽度小于

479px

的时候，加载


精品文档
精品文档
3
精品文档
页面。
CSS中直接设置：
精品文档
精品文档
3
精品文档
***@mediascreenand(max-width:479px){/*

具体的

CSS属性设置

*/}
精品文档
精品文档
3
精品文档
对于MediaQueries的一些常用属性，只对常用的几个做一个简单列举说明，其他的属
性请各位自行查阅相关资料：
width：描述终端设备显示区域的宽度，接受 max/min的前缀；
height：描述终端设备显示区域的高度，接受 max/min的前缀；
device-width：描述终端设备屏幕的宽度，接受 max/min的前缀；
device-height：描述终端设备屏幕的高度，接受 max/min的前缀；
精品文档
精品文档
3
精品文档
orientation：描述终端设备处于横屏还是竖屏的状态，取值分别为：

landscape/portrait。
精品文档
精品文档
3
精品文档
当我们调整浏览器大小的时候，上面通过媒体查询属性的操作就可以完成响应式Web设计的工作，但是这却不能满足移动终端的浏览器，因为移动浏览器默认页面是为宽屏幕设计的，所以会把他缩小来适应小屏幕，但是终端设备却无法识别正确的宽度，所以光靠媒体查询是解决不了移动终端设备的响应式Web设计的。这个时候就必须使用viewport的
meta标签来做一系列的设置，同样，下面我只给出一个简单列举说明，有兴趣的同学可以
参考一些网上资料进行 深入性的研究。
正常我们需要响应式 Web设计的页面，在页面中都要加上 viewport