标签：
一、响应式概述：
不仅仅是通过屏幕尺寸来动态改变页面容器的宽度等，完整的响应式网站的实现需要考虑到这些问题：响应式布局、响应式html和css、响应式媒体、响应式javascript。
二、移动端布局控制：
使用 viewport标签在手机浏览器上控制布局控制不缩放等通用定义。（用到PC端不影响）
<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1" /> <meta name="apple-mobile-web-app-status-bar-style" content="blank" />
三、普通元素的栅格布局：
.row{ width: 100%; } .row .col-1 { width: 8.33333333333% } .row .col-2 { width: 16.6666666667% } /* ...比较多，这里省略 */ .row .col-12 { width: 100% }
四、不同设备元素容器布局：
通用栅格布局并不能解决我们全部的问题，例如某个页面板块列表，PC端一排展示4个，移动端一排展示2两个，使用栅格的话我们就需要重新定义.col-3和.col-6了。对于这种情况我们的处理方法也比较简单 对于移动端浏览器，通过简单的js逻辑判断，在html的body中加入mobile的内容，在body里面的相同元素使用不同的宽度布局的方式。这种方式订制化坚强，如果宽度布局用的不多，即可以使用这种不同宽度布局的方式来实现。这样就实现了一个普通div在移动端和PC端的不同布局。
.container{ width: 25%; } .mobile .container{ width: 50%; }
五、响应式html与css：
1、CSS文件，分开两种，一个是移动端，另一个是PC端
2、动态使用js渲染不同内容
六、响应式媒体
1、使用css背景图片 (依赖media query)
2、picture element (依赖浏览器新特性+midea query)
3、adaptive-images http://adaptive-images.com/
4、responsive-images.js(依赖js) https://github.com/kvendrik/responsive-images.js
<img alt=‘kitten!‘ data-src-base=‘demo/images/‘ data-src=‘<480:smallest.jpg, <768:small.jpg,<960:medium.jpg,>960:big.jpg‘ />
七、不同屏幕分辨率自适应方案
主要是解决高清屏(retina屏)的问题，由于高清屏与普通屏幕有所区别：
由于高清屏的特性，1px是由2×2个像素点来渲染，那么我们样式上的border:1px在Retina屏下会渲染成2px的边框，与设计稿有出入，为了追求1px精准还原，我们就不得不拿出一个完美的解决方案。(此处没去深究)JS检测是否高清屏：var retina = window.devicePixelRatio > 1; 例如一个边框的
@media only screen and (-webkit-min-device-pixel-ratio:2), only screen and (min-device-pixel-ratio:2) { button { border:none; padding:0 16px; background-size: 50% 50%; }
标签：
原文地址：http://www.cnblogs.com/babyfacer/p/5685910.html
