响应式设计介绍

2013年，智能机上网时间已经超过PC机了，并且这种趋势是不可逆的，设计移动设备将成为Web开发人员的首要任务。针对移动用户，一种方案是开发Native App，如分别给IOS和Anroid开发应用，但是这种方案成本非常高，更新比较困难；另外一种是建立一个专门的移动网站，通常是m.*.com，例如m.qian.com，这种方式需要维护2套代码，成本也比较高；还有一种方案就是响应式设计，好处是一套代码打天下，维护相对来说方便多了，成本较低，开发速度较快。在文章的最后会有它缺点的讨论。

什么是响应式设计

维基百科对响应式设计是这么介绍的：

响应式Web设计是网站制作使用的一个叠层样式表( CSS3media queries)，结合流体网格适应各种布局，还可灵活使用图像。用户可跨越不同设备和浏览器的限制，访问相同内容，布局也利于阅读和浏览，只需细微的调整、平移或滚动。

移动优先

• 手机在爆炸式增长

  移动设备的数量和质量都在急速增长，随着数量的激增，越来越多的人们开始只使用移动设备来访问互联网。

• 手机迫使你专注

  优先为手机设计可以迫使你专注于弄清楚哪些内容是最重要的，因为这些设备大都只有一个很小的屏幕，这就意味着你能往里面填充内容的空间很有限。这样你就只能把那些对于用户来说最为重要的内容放在首页。

• 手机延伸了你的能力

  现在的智能机功能越来越强，例如我的Nexus 4是四核，2G内存，大有超越PC机的节奏。除此之外，智能机还有好多PC机所没有的功能，如可以调用地理定位功能来优化体验，可以根据人们持握它们的方向来改变布局，并且好多设备拥有多点触摸接口。这些功能极大的丰富了人们的用户体验。

  此外移动设备上也开始加装越来越多的传感器，虽然目前还有传感器是不能从浏览器中访问到的，但是你要放眼未来，你可以考虑一下如何利用这些传感器来创建出更好的体验。

英文原文

media type & media query

media type(媒体类型)是css 2中的一个非常有用的属性，通过media type我们可以对不同的设备指定特定的样式，从而实现更丰富的界面。media query(媒体查询)是对media type的一种增强，是CSS 3的重要内容之一。随着移动互联网的发展，media query开始得到大家的重视，现在它是响应式开发的基础。

media type

让我们先了解一下media type，其实这个大家会比较熟悉一点，我们通常会用到的media type会是all 和screen，然后是print，一些网站会专门通过print类型为页面的打印格式提供更友好的界面。其实，media type有很多种：

Media Query

Media Query是CSS3 对Media Type的增强版，其实可以将Media Query看成Media Type(判断条件)+CSS(符合条件的样式规则)，常用的特性w3c共列出来13种。具体的可以参阅：Media features 。

详细请参考media type与media query

更多Media Query请参考：CSS3 Media Queries

Viewport

当你用iPhone访问一个没有面向移动设备优化过的网站时(最好选取960px宽度的网站)，你会发现iPhone上面刚好可以把整个页面显示出来，但是页面被缩小了非常多，字体非常小。这其实是Sarari默认把自己当成980px宽度来处理的，而所有iPhone(竖屏)的真实宽度为320px，事实上几乎所有的移动设备都有类似的情况，iPhone的请参考iPhone 5 Display Size and Web Design Tips。这就牵扯到Viewport的概念了。

Viewport是浏览器的可视区域，也是浏览器的宽度，在PC上面问题比较简单，宽度是多少就多少，但是在移动设备上，浏览器尝试去把整个页面都显示出来，所以就会Viewport值不准确的情况，例如上面提到的Safari从iPhone那里获取到宽度是980px(浏览器只能从系统那里获取宽度)，所以我们要做第一件事就是要浏览器用真实的宽度去解析页面，代码如下：

<meta name="viewport" content="width=device-width, initial-scale=1.0">
      

"width=device-width"表示浏览器用它自己真实的宽度，如iPhone上面就是320px，initial-scale=1.0表示默认不进行缩放。关于Viewport更多请参考：Using the viewport meta tag to control layout on mobile browsers

补充一下：设备像素不等于CSS像素，例如用户放大页面300%，CSS像素也跟着放大300%，但设备像素肯定不会有变化。很多设备为了保证良好浏览效果，通常会告诉浏览器一个假的分辨率，例如iPhone5s的设备分辨率是640x1136，但是却告诉浏览器它的分辨率是320x568(网站要加width=device-width，否则是980宽度)，否则真的以640x1136在那点屏幕上进行浏览页面肯定要近视了。

确定断点

传统的确定断点的方案是使用一些固定的宽度进行划分，如320px(iPhone)，768px(iPad)，960px或1024px(传统PC浏览器)，这种方案的好处是很好照顾到了当前主流的设备，但是技术发展实现是太快了，各种不同分辨率的设备层出不穷，很难保证未来能很好的支持各种设备。

另外一种确定断点的方法是根据内容进行设置断点以及设置多少个断点，这样有助于将布局和分辨率进行解耦，同时可以尽可能多的支持各种分辨率的设备。一种具体做法是将浏览器的宽度缩小到300px，然后逐步拉大浏览器的宽度，观察页面的变化，用来确定在何处设置断点。

设计原则 - 从手机端向上设计

传统网页设计建议使用最新的功能，然后支持优雅降级，这么做其实使广大低端设备拥有较差的用户体验。而在做响应式设计时提倡从移动端开始设计，先创建核心体验，核心体验要尽量简单、合理，同时又能在尽可能多的设备上使用。在此基础上，逐渐为屏幕更大、功能更强的设备添加更多的功能。

图片处理

不同分辨率的设备使用不同尺寸的图片可以节约带宽，但是千万不要使用display:none来隐藏不想要的图片(比如隐藏大尺寸的图片而只显示小图片)，因为隐藏后的图片浏览器会加载隐藏的图片的。

背景图片

背景图片处理起来比较简单，使用Media Query来根据设备分辨率载入合适的图片就可以了。请看下面例子：

        @media only screen and (max-width: 320px) {
          .header { background: url(header_320.png) no-repeat; }
        }
        @media only screen and (max-width: 640px) {
          .header { background: url(header_640.png) no-repeat; }
        }
        @media only screen and (min-width: 640px) {
          .header { background: url(header_normal.png) no-repeat; }
        }
      

IMG标签内嵌图片

我们假定在小屏幕上不显示图片，而在大屏幕上显示图片，所以我们不能直接在HTML里面插入IMG标签，我们可以将图片URL保存在它的父元素的data-src属性上，然后用JavaScript根据分辨率判断是否需要显示图片，如果需要，则用JavaScript遍历将所有图片插入到HTML中。

        <header data-src="images/logo.png"></header>
      

Retina屏幕优化

Retina屏幕显示图片时，由于像素比例（devicePixeRatio）是2，这个时候图片也将放大两倍，此时就造成了图片在设置中显示时被拉伸，呈现出来的时候就模糊不清，所以必须给Retina屏幕准备一例高清图片。做法是先默认使用普通图片，同时用data-src属性来保存高清图片的URL，然后用JavaScript判断是否需要替换成高清图片。

      <header><img src="logo.jpg" alt="" data-src="logo@2x.jpg" /></header>
      

JavaScript可以根据window.devicePixelRatio值来判断设备的像素比例，Retina屏的像素比例是2，其实还有好像设备的像素比例是介于1~2之间的。CSS可以在Media Query中使用-webkit-min-device-pixel-ratio属性。

关于Retina屏幕优化的更多知识可以参考：移动Web——CSS为Retina屏幕替换图片以及Retina 屏幕下，网页图片的显示兼容

针对移动设备的更多优化

移动设备的特点是CPU慢，内存少，网速慢，功能多。所以我们应该针对移动设备的特点尽量避开它的缺点，发挥它的优点。

性能优化

• 减少网页的大小

  可以使用更小的图片，使用轻量级的JS库，如使用ZeptoJS或XUIJS来代替jQuery，次要的内容可以不载入。对JS和CSS文件进行压缩，同时开启服务器的压缩功能。

• 减少HTTP请求数

  可以使用文件合并，将所有的JS和CSS各自合并成一个文件，同时使用CSS Spirits技术将小图标进行合并。

• 延迟加载图片

  使用图片延迟加载技术，页面只加载浏览器可视区域内的图片。

• 使用HTML5技术

  移动设备上的浏览器一般对HTML5支持得比较好，所以可以考虑使用HTML5的一些功能来增强移动设备的用户体验。

  • 语音输入
  • 触摸功能
  • 手势
  • GPS定位
  • 智能输入框，如Email, URL, Telephone，移动设备会为它们显示不同的键盘。
• 根据带宽显示不同的内容

  我们可以从navigator.connection中获得设备的网络类型，比如2G, 3G等，然后根据不同的带宽显示不同的图片，比如低带宽的设备显示低分辨率的图片及保证它们有较快的响应速度。关于navigator.connection可以参考Network Information API

更多挑战

这几年各种新的设备层出不穷，如可穿戴设备的流行逐渐兴起，如智能手表，智能眼镜等，这些设备的特点是屏幕非常小。另外以智能电视为代表的超大屏幕的设备也越来越流行起来。所有这些都给Web设计开发人员带来巨大的挑战，当然将来会出现更多的各种神奇的设备。

调试工具

• Adobe Edge Reflow

  Adobe Edge Reflow可以用于响应式设计的可视化创作，提高通过HTML5和CSS3技术在不同设备上所进行的网页开发效率,，Reflow的主要功能是通过在设计的过程中将所有的“断点”“模块”进行可视化的展示，让开发者可以在工具中一边进行间距的调试，一边测试展示效果。

• Chrome 开发者工具

  Chrome浏览器可以模拟各种设备的User Agent，Device metrics，Device Orientation，Touch Event，Override Geolocationt等，可以很方便的在Chrome上面模拟手机上面的各种行为与效果，方便的进行开发测试。可以按F12，然后点击右下角的Setting，接着点击Overrides就可以进行设置。

• Responsivator

  这是一个在线测试响应式设计页面的工具，它提供了很多不同的尺寸屏幕的展示效果，你只需要提供一个url，就可以看到你的网站在不同的屏幕下的显示效果。

• Responsive Test

  这也是一个在线的响应式测试工具，和Responsivator不同的地方在于，它只有一个窗口，但是你可以任意的修改它的尺寸，也可以对屏幕进行旋转，它同时自带了一些常用设备的模板，方便测试。

IE支持，respond.js, ie.css

IE9+才开始支持Media Query，要想低版本的IE支持Media Query，需要借助JS的支持，respond.js和css3-mediaqueries-js。

respond.js压缩后1k，只实现了media query中最常用的min-width max-width的兼容，所以性能非常好，而css3-mediaqueries-js基本实现了所有css3规范中的media query特性的兼容，所以导致压缩有16k，测试反馈其性能远低于respond.js。其实大部分情况下只会用到max-width和min-width，因此这时Respondjs无疑是首选。详细请参考media query ie8- 兼容实现总结

缺点

上面说了好多响应式设计的优点，但是响应式设计不是银弹，下面说说它不适合的场合及缺点。

• 加载需要一定的时间

  虽然，它不是一个大问题，在响应式设计中，需要下载一些看起来并不必要的HTML/CSS。除此之外，图片并没有根据设备调整到合适大小，而这正是导致加载时间加倍的原因。

• 优化搜索引擎

  对于响应式Web设计，为搜索引擎确定关键字不是一件容易的事。因为相比一般桌面用户，移动用户多采用不同的关键字，修改标题及其他事项都比较困难。

• 时间花费

  开发响应式网站是一项耗时的工作。如果你计划把一个现有网站转化成响应式网站，可能耗时更多。如果你想要一个响应式网站，最好从草图开始重新设计。

• 布局难以控制

  响应式Web设计的布局主要是液态的，这也正是设计者对设计样式不好控制的原因。而且眼下正是设计者提前展示各种“复制品”的时候。设计者试图针对移动和桌面布局分别显示线框和设计原型。只有等到这两种布局均得到提高后，响应式Web设计策略才能真正实现。

响应式设计的替代方案

• 加载需要一定的时间

  虽然，它不是一个大问题，在响应式设计中，需要下载一些看起来并不必要的HTML/CSS。除此之外，图片并没有根据设备调整到合适大小，而这正是导致加载时间加倍的原因。

• 优化搜索引擎

  对于响应式Web设计，为搜索引擎确定关键字不是一件容易的事。因为相比一般桌面用户，移动用户多采用不同的关键字，修改标题及其他事项都比较困难。

• 时间花费

  开发响应式网站是一项耗时的工作。如果你计划把一个现有网站转化成响应式网站，可能耗时更多。如果你想要一个响应式网站，最好从草图开始重新设计。

• 布局难以控制

  响应式Web设计的布局主要是液态的，这也正是设计者对设计样式不好控制的原因。而且眼下正是设计者提前展示各种“复制品”的时候。设计者试图针对移动和桌面布局分别显示线框和设计原型。只有等到这两种布局均得到提高后，响应式Web设计策略才能真正实现。

CSS框架

• Foundation
• Bootstrap

参考文献

• CSS3 Media Queries
• media query ie8- 兼容实现总结
• iPhone 5 Display Size and Web Design Tips
• Retina 屏幕下，网页图片的显示兼容
• 移动Web——CSS为Retina屏幕替换图片
• Network Information API
• 走向视网膜（Retina）的Web时代
• 响应式Web设计：最佳指南

如需转载，请注明来自: BorisHuai前端修炼 > 响应式设计介绍