移动端布局笔记

移动端布局笔记

概念

英寸

设备的物理尺寸的单位，即屏幕对角线的长度，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标签：

<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

指定了布局视口=理想视口，并且禁止缩放。所以添上width=device-width的viewport meta后页面变大了（一开始页面内容小得看不清），实际上是布局视口变小了。