移动端前端页面适配 #30
Description
首先来了解一些基本概念：
视口 viewport
简单的理解，viewport是严格等于浏览器的窗口。在桌面浏览器中，viewport就是浏览器窗口的宽度高度。但在移动端设备上就有点复杂。分为布局视口（layout viewport） 和 视觉视口(visual viewport)：
通俗的讲，布局视口 就是html最外面包裹的那个容器，我们的页面就“装”在布局视口中，可以通过document.documentElement.clientWidth获取其大小。
视觉视口 是指用户通过设备屏幕看到的区域，可以通过缩放来改变视觉视口的大小，并通过window.innerWidth获取。
缩放
缩放改变的是CSS像素的大小，放大时CSS像素增大，则一个CSS像素可以跨越更多的设备像素，视觉视口会变小。
分辨率
指屏幕像素的多少，如 MacBook Pro 2015 13inch 的分辨率为 2560 × 1600，就是指屏幕宽度是2560个像素，高度为1600个像素。同样尺寸的屏幕，分辨率越高，屏幕像素密度（PPI）越大，屏幕显示效果越清晰。
物理像素 physical pixel
又称为设备像素，是显示设备上最小的物理部件，物理像素的密集程度决定了我们看到的图像质量。每一个物理像素都有其独立的颜色值和亮度值。
CSS像素
主要用在浏览器上，用来精确确定web页面上的内容，css像素是一种设备无关像素（DIPs），device independent pixel，在一个标准的显示密度下，1css pixel = 1 physical pixel。
DPR
Device Pixel Ratio 设备像素比，DPR = 同宽度下设备像素数量 / 设备独立像素数量。非视网膜屏的DPR一般为1，视网膜屏DPR一般大于1。在js中可以使用window.devicePixelRatio来获取设备的dpr值.
PPI/DPI
屏幕像素密度，pixels（dots） per inch，每英寸上的物理像素数量，PPI越高，像素密度越大。在PPI高到一定程度的情况下，如300PPI，人类的眼睛就无法辨认出屏幕上的像素点，这种高PPI技术称为视网膜技术或Retina技术。注意区分DPI和DIP。
rem及其他css像素单位
rem和px，pt一样是一个css单位，定义是font size of the root element,意思是根元素的字体大小，比如设置html元素的font-size: 16px;则1rem = 16px; 这个单位在做css响应式设计时非常有用，你可以计算页面中所有像素相对于根字体的相对大小，然后再根据屏幕的实际大小动态改变根元素的font-size就可以做出响应式的页面了。其他css单位：
- px (pixel，像素)：是一个虚拟长度单位，是计算机系统的数字化图像长度单位，如果px要换算成物理长度，需要指定精度DPI(Dots Per Inch，每英寸像素数)，在扫描打印时一般都有DPI可选。Windows系统默认是96dpi，Apple系统默认是72dpi。pt = 1/72(英寸), px = 1/dpi(英寸)
- vw 是一个相对单位，它相对的是布局视口，1vw就是1%的布局视口宽度。vw是用来代替rem的下一代移动端解决方案，也是Flexible2.0的核心原理，详细请看: 再聊移动端页面的适配
- pt (point，磅)：是一个物理长度单位，指的是72分之一英寸。
- em(相对长度单位，相对于当前对象内文本的字体尺寸)：是一个相对长度单位，最初是指字母M的宽度，故名em。现指的是字符宽度的倍数，用法类似百分比，如：0.8em, 1.2em,2em等。通常1em=16px。
- 字号：是中文字库中特有的一种单位，以中文代号表示特定的磅值pt，便于记忆、表述。
如何做移动端页面适配？
淘宝移动端解决方案： Flexible