文章首页 Web开发 Windows开发 编程语言 数据库技术 移动平台 系统服务 微信 设计 布布扣 其他

响应式设计介绍

时间：2014-01-21 00:53:55   收藏：0   阅读：509

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

什么是响应式设计

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

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

移动优先

英文原文

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有很多种：

值 描述
screen 针对不分页的计算机屏幕。
tty 针对使用等宽字符网格的媒介（比如打字机、终端或其他具有有限显示能力的设备）。
tv 针对 TV 类型的设备。
projection 针对投影机。
handheld 针对手持设备。
print 针对打印预览模式的页面和文档。
braille 针对盲人用点字法触觉反馈装置。
aural 针对语音合成。
all 针对所有设备或装置。

Media Query

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

详细请参考media type与media query

属性 值 Min/Max 描述
color 整数 yes 每种色彩的字节数
color-index 整数 yes 色彩表中的色彩数
device-aspect-ratio 整数/整数 yes 宽高比例
device-height length yes 设备屏幕的输出高度
device-width length yes 设备屏幕的输出宽度
grid 整数 no 是否是基于格栅的设备
height length yes 渲染界面的高度
monochrome 整数 yes 单色帧缓冲器中每像素字节
resolution 分辨率(“dpi/dpcm”) yes 分辨率
scan Progressive interlaced no tv媒体类型的扫描方式
width length yes 渲染界面的宽度
orientation Portrait/landscape no 横屏或竖屏

更多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慢，内存少，网速慢，功能多。所以我们应该针对移动设备的特点尽量避开它的缺点，发挥它的优点。

性能优化

更多挑战

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

调试工具

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- 兼容实现总结

缺点

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

bubuko.com,布布扣

响应式设计的替代方案

CSS框架

参考文献

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

原文：http://blog.csdn.net/borishuai/article/details/18358741

评论（0）
© 2014 bubuko.com 版权所有 - 联系我们:wmxa8@hotmail.com
打开技术之扣，分享程序人生！