移动端布局笔记
概念
英寸
设备的物理尺寸的单位，即屏幕对角线的长度，1英寸 = 2.54 厘米。
分辨率
屏幕分辨率/Resolution
屏幕由多少个像素组成。
像素/Pixels
一个小正方形的像素方块，相对单位。
DPI/PPI
每英寸包含的像素点，计算公式：
物理像素/设备独立像素/DIP
设备能控制显示的最小单位，是真实存在的物理单元。
设备像素比/DPR
设备像素比表示1个CSS像素（宽度）等于几个物理像素（宽度）：DPR = 物理像素数 / 逻辑像素数
应用
一般由设计师按照设备像素(Device Pixel)为单位制作设计稿，前端工程师参照相关的设备像素比(Device Pixel Ratio)，进行换算以及编码。
拿iPhone 6s来说：
其分辨率为1334*750px，设备尺寸为4.7英寸，可以计算出ppi为326，得知其dpr为2，可以得到对于该设备1个CSS像素数对应4个设备像素点显示，所以iPhone 6s的虚拟像素为宽750/2=375px，高1334/2 = 667px，即虚拟分辨率为667*375px。此时，我们如果在代码中设置元素的宽高为667*375px的话，则该元素的实际尺寸就等于iPhone 6s的屏幕尺寸
viewport原理解析
桌面上视口宽度等于浏览器宽度，但手机上不同。
布局视口：
手机上为了容纳为桌面浏览器设计的网站，默认布局视口宽度远大于屏幕宽度，为了让用户看到网站全貌，它会缩小网站。
视觉视口：
屏幕的可视区域，即物理像素尺寸。
理想视口：
当网站是为手机准备的时候使用。通过meta来声明。早期iPhone理想视口为320x480px。
所以，在没有缩放的情况下，屏幕的CSS像素宽度其实是指理想视口的宽度，而meta标签：
代码语言：javascript复制<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>指定了布局视口=理想视口，并且禁止缩放。所以添上width=device-width的viewport meta后页面变大了（一开始页面内容小得看不清），实际上是布局视口变小了。
