标签：
最近在看奇舞团新书<<移动WEB手册>>，心得如下：
在WEB的响应式设计出来之前，如果直接在手机设备上显示针对PC端的网站，因为屏幕的分辨率很小，往往出现的是横纵方向的滚动条，而且字体很小。为了更好的显示效果，就需要将网站针对小屏幕做出相应的适配。
布局视口：在移动端浏览器，网站所展现的界面宽度、样式；
视觉视口：在移动端浏览器，用户通过手机可以看到网站界面，可以是全部、也可以是部分（有横纵滚动条）。
最优的效果是将布局视口局限在视觉视口中，限制横向滚动条的出现，比如：在Retina出现之前，手机屏幕的分辨率在320px/480px，可以针对这种分辨率级别的设备来适配网站设计；但是后来Retina出现带来的问题就是设备屏幕的物理尺寸没有发生变化，但是分辨率变了，从320X480变为640X960，这就使得如果根据分辨率来调整网站的开发方式是失败的。
同时Retina出现的本身目的是说：将原来1个像素显示的屏幕替换为相应的4个，横纵方向变成原来2倍，以此达到高清的效果。因此640X960物理像素的屏幕，网站仍然应该以320X480CSS像素的效果来展示，这样CSS像素就成为了相对单位：
物理像素：硬件屏幕设备实际的横纵方向的点阵的基本单位，由硬件决定；
CSS像素：网站设计方面的基本单位，WEB设计开发人员无需关心硬件级别适配，只需按照CSS像素方式的设计布局即可。
由此新的名词产生：设备像素比DPR（Device Pixel Ratio），指的是：CSS像素与物理像素的比，也可以看做是：屏幕物理像素大小（640X960物理像素）与理想视口大小（320X480CSS像素）的比。DPR也可以是小数，如1.5。
分辨率有两个单位：
dpi：每英寸点数（Dots per inch），这里的点数指的是像素的个数，针对于屏幕，这个值相对固定，如：96。以此来计算：分辨率 = 96dpi * inch_size；
dppx: 每像素点数（Dots per pixel），这个单位不被广泛支持，在DPR=2的屏幕上来计算：分辨率 = (96dpi * DPR) * inch_size；
DPR与分辨率的关系：
分辨率reslution与DPR描述的实际上是一个东西，只是站在不同角度上看待的，由于前者在移动端支持的不太好，所以DPR成为事实上的标准，而被普遍支持。以后的移动端开发都已DPR作为参考来述说。
meta中的viewport：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
device-width就是以物理像素计算的屏幕宽度，如：DPR为2，理想视口为320X480的屏幕，宽度为640；
width=device-width: 将宽度设定为物理像素的宽度，然后通过媒体查询中的DPR=2来适应；
标签：
原文地址：http://www.cnblogs.com/diydyq/p/4511482.html
