响应式Web设计(三)：响应式Web设计的方法.docxVIP

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