Web多端适应原理与方案详解

1.概念

1.1.屏幕指标

 物理上，一个屏幕是有尺寸、像素分辨率和密度指标的。如上图所示。其中显示的1920*1080是水平像素数*垂直像素数，ppi即是每英寸像素数。

1.2.CSS像素

px是CSS像素的基本单位，不同于硬件上的物理像素，CSS像素是逻辑像素。在谈论CSS像素时一定要清楚它的上下文：

• 标准的屏幕像素密度下，1个css像素对应一个物理像素。
• 对于高屏幕像素密度，就会存在1个css像素对应多个物理像素的情况。因此，将物理像素/css像素的比值称为设备像素比（dpr）。
• 缩放会逻辑像素的大小，同时会影响设备像素比

1.3.长度单位

除了px外，css的长度单位还分为绝对长度单位和相对长度单位。

• 绝对长度单位
  • mm：毫米
  • cm：厘米
  • in：英寸
  • pt：point，大约1/72英寸；
  • pc：pica，大约 12pt，1/6英寸
• 相对长度单位
  • %：百分比
  • e