2013年，智能机上网时间已经超过pc机了，并且这种趋势是不可逆的，设计移动设备将成为web开发人员的首要任务。针对移动用户，一种方案是开 发native app，如分别给ios和anroid开发应用，但是这种方案成本非常高，更新比较困难；另外一种是建立一个专门的移动网站，通常是m.*.com，例如 m.qian.com，这种方式需要维护2套代码，成本也比较高；还有一种方案就是响应式设计，好处是一套代码打天下，维护相对来说方便多了，成本较低， 开发速度较快。在文章的最后会有它缺点的讨论。
什么是响应式设计维基百科对响应式设计是这么介绍的：
响应式web设计是网站制作使用的一个叠层样式表( css3media queries)，结合流体网格适应各种布局，还可灵活使用图像。用户可跨越不同设备和浏览器的限制，访问相同内容，布局也利于阅读和浏览，只需细微的调整、平移或滚动。
移动优先手机在爆炸式增长移动设备的数量和质量都在急速增长，随着数量的激增，越来越多的人们开始只使用移动设备来访问互联网。手机迫使你专注优先为手机设计可以迫使你专注于弄清楚哪些内容是最重要的，因为这些设备大都只有一个很小的屏幕，这就意味着你能往里面填充内容的空间很有限。这样你就只能把那些对于用户来说最为重要的内容放在首页。手机延伸了你的能力现在的智能机功能越来越强，例如我的nexus 4是四核，2g内存，大有超越pc机的节奏。除此之外，智能机还有好多pc机所没有的功能，如可以调用地理定位功能来优化体验，可以根据人们持握它们的方 向来改变布局，并且好多设备拥有多点触摸接口。这些功能极大的丰富了人们的用户体验。此外移动设备上也开始加装越来越多的传感器，虽然目前还有传感器是不能从浏览器中访问到的，但是你要放眼未来，你可以考虑一下如何利用这些传感器来创建出更好的体验。英文原文
media type & media querymedia 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 querymedia 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(浏览器只能从系统那里获取宽 度)，所以我们要做第一件事就是要浏览器用真实的宽度去解析页面，代码如下：
?
1
2
<code> <meta name=viewport content=width=device-width, initial-scale=1.0>
</code>
“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的设备分辨率是640×1136，但是却告诉浏览器它的分辨率是320×568(网站要 加width=device-width，否则是980宽度)，否则真的以640×1136在那点屏幕上进行浏览页面肯定要近视了。
确定断点传统的确定断点的方案是使用一些固定的宽度进行划分，如320px(iphone)，768px(ipad)，960px或1024px(传统pc 浏览器)，这种方案的好处是很好照顾到了当前主流的设备，但是技术发展实现是太快了，各种不同分辨率的设备层出不穷，很难保证未来能很好的支持各种设备。
另外一种确定断点的方法是根据内容进行设置断点以及设置多少个断点，这样有助于将布局和分辨率进行解耦，同时可以尽可能多的支持各种分辨率的设备。一种具体做法是将浏览器的宽度缩小到300px，然后逐步拉大浏览器的宽度，观察页面的变化，用来确定在何处设置断点。
设计原则 – 从手机端向上设计传统网页设计建议使用最新的功能，然后支持优雅降级，这么做其实使广大低端设备拥有较差的用户体验。而在做响应式设计时提倡从移动端开始设计，先创 建核心体验，核心体验要尽量简单、合理，同时又能在尽可能多的设备上使用。在此基础上，逐渐为屏幕更大、功能更强的设备添加更多的功能。
图片处理不同分辨率的设备使用不同尺寸的图片可以节约带宽，但是千万不要使用display:none来隐藏不想要的图片(比如隐藏大尺寸的图片而只显示小图片)，因为隐藏后的图片浏览器会加载隐藏的图片的。
回到顶部
背景图片背景图片处理起来比较简单，使用media query来根据设备分辨率载入合适的图片就可以了。请看下面例子：
?
1
2
3
4
5
6
7
8
9
10
<code>? @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 { b