原文3年多前发表在私人站点，现迁移到简书
响应式是指网站在不同分辨率、不同大小的设备下，实现比较好的体验，背后的技术基础在于区分不同设备的尺寸、密度
1.设备尺寸和分辨率
PC时代，设备尺寸一般控制在1024px，基本不考虑用户主动改变浏览器大小的情况。诺基亚时代，已经可以小尺寸设备访问网站，那时候网路差，上网本来就不方便，整体体验都不好，网页都是按照PC渲染，再局部放大将就着看。
iphone刚出现时，也是通过先加载全部网页再放大局部浏览，后面出现了为iphone量身定制的网站，直接设置宽度为320px。ios最先引入了meta viewport来允许用户修改视窗的大小，来达到最好的效果。
** 可以在这里直观的感受下：http://andreasbovens.github.io/understanding-viewport/ **
（不设置viewport）
（设置了width=device-width之后）
设备密度
iphone3和4都是3.5寸，前者分辨率是320*480，后者是640何960，这和设备密度有关
devic pixel： 物理像素(长宽单位为1)。在屏幕上，元素其实是通过硬件的物理点（RGB）来展示的。1个大设备上的点比小设备上的点要大(很容易理解)，只是因为我们看的距离不同（看电视会坐的比较远，看手机会拿的很近），所以对我们来说看着都比较清晰
css pixel： css像素，假设有个div宽20px; 如果以绝对的1:1物理点来显示的话，必然大屏幕的20px会比小屏的px大（想象一下设置一个宽度，在电脑和手机上表现不一样，这就太坑爹了）。 我们实际web开发的时候没遇到这样的问题，因为css px是一个中间层，在retina屏上1X1的css pixel点以4(2X2)个device pixel来展示
devicePixelRatio： 设备像素比，就是指多少个物理像素来显示一个逻辑像素，现在比较多的是2，3也有,可以同通过window.devicePixelRatio获得
device width： 设备宽度，指逻辑像素下的款宽度（就是上面的css pixel），比如iphone的device width就是320*480。这里可以查看各种设备的物理像素和逻辑像素
文字
对文字来说，其实不存在不同密度下显示的的问题，font-size:12px;在不同设备上看着都是一样得，因为可以自动的以多个物理点来显示一个逻辑点。但是图片就没这么容易了，一个200200px的图片在2倍密度的设备上，实际对应的是400400的物理点，多出来的点只能以临近的值来填充，所以就会显得模糊。
图片
图片的响应式确实是一个比较棘手的问题，除了视觉上，还有性能上的问题要考虑，上面200200px像素的问题，简单的做法就是提供一张400400的图片，以200*200展示
