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

　　介绍完响应式Web的背景和概念以后，是时候该介绍具体的实现方法了，其实响应式Web设计的方法很简单，就是利用CSS3的媒体查询Media Queries和Viewport来解决问题的。

　　首先咱们一块儿来看看Media Queries，这里我只会对其作一个简单的列举介绍。（有兴趣深刻的同窗能够参考：http://www.w3.org/html/ig/zh/wiki/CSS3%E5%AA%92%E4%BD%93%E6%9F%A5%E8%AF%A2）

　　经过媒体查询的设置，咱们能够根据屏幕宽度、屏幕方向等各个属性来加载不一样场景下不一样的CSS文件来渲染页面的视觉风格。具体的使用方法有如下两种：

• 经过link标签：
  

  <link rel="stylesheet" type="text/css" media="screen and (max-width: 479px)" href="testcssbywidth1.css" />

  示例代码表明当当前屏幕宽度小于479px的时候，加载testcssbywidth1.css文件来渲染页面。
• CSS中直接设置：
  

  @media screen and (max-width:479px) {
      /* 具体的CSS属性设置 */
  }

    对于Media Queries的一些经常使用属性，只对经常使用的几个作一个简单列举说明，其余的属性请各位自行查阅相关资料：

• width：描述终端设备显示区域的宽度，接受max/min的前缀；
• height：描述终端设备显示区域的高度，接受max/min的前缀；
• device-width：描述终端设备屏幕的宽度，接受max/min的前缀；
• device-height：描述终端设备屏幕的高度，接受max/min的前缀；
• orientation：描述终端设备处于横屏仍是竖屏的状态，取值分别为：landscape/portrait。

    当咱们调整浏览器大小的时候，上面经过媒体查询属性的操做就能够完成响应式Web设计的工做，可是这却不能知足移动终端的浏览器，由于移动浏览器默认页面是为宽屏幕设计的，因此会把他缩小来适应小屏幕，可是终端设备却没法识别正确的宽度，因此光靠媒体查询是解决不了移动终端设备的响应式Web设计的。这个时候就必须使用viewport的meta标签来作一系列的设置，一样，下面我只给出一个简单列举说明，有兴趣的同窗能够参考一些网上资料进行深刻性的研究。

　　正常咱们须要响应式Web设计的页面，在页面中都要加上viewport的设置：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi">

• 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（使用高分辨率，中低分辨率场景下会相应缩小）、medium-dpi（使用中等分辨率，高低分辨率分别进行相应的放大和缩小，缺省值）、low-dpi（使用低等分辨率，中高分辨率相应放大）。

      经过对viewport的设置，利用Media Queries的属性设置，你就能够作出响应式的Web页面。下面开始一步一步告诉你响应式Web设计怎么开始的：

• 容许网页宽度自动调整：

    就是在网页的中追加viewport meta的定义。

• 选取一个标准开发出具体页面：

    好比一个页面被要求对屏幕宽度为320px、480px、640px的三种场景下进行响应式设计，这个时候正常会选取320px下的标准先进行页面开发。

• 抽取最低标准下的CSS样式独立成外链样式文件：

    将320px下的CSS样式所有抽取成外链样式文件，响应式设计的页面HTML代码中，不要有任何CSS定义的代码。

• 根据UEDMMs的视觉稿进行其余标准的CSS样式文件开发。
• 经过Media Queries属性设置来定义不一样场景下加载不一样的CSS样式文件。

     经过以上几步以后，OK，你的第一个响应式Web设计的页面就正式完成了，那么下面就要开始测试了，固然你能够很老实的用每一种终端设备来进行测试，固然这个是有必要的，可是为了立刻就能看到响应式设计的效果，我推荐一个工具（http://dfcb.github.io/Responsivator/）给你，试试吧，你会以为颇有快感的。

　　为何如今这么不少网站都选择响应式Web设计呢？主要优点我的感受有如下几个方面：

• 给用户更好的视觉呈现：

    不一样的屏幕下页面的呈现方式不同，这样能够给不一样终端的用户不一样的视觉体验。

• 下降开发的成本：

    响应式Web设计相对于定制开发仍是APP开发，不管是从开发资源投入、开发工时等各个方面都节省了很多，正所谓省时省力省钱，何乐而不为呢？

• 入口只有一个：

    无论你用什么终端访问网页，URL都是一个。