移动端适配

引言

移动端适配一向是很令人头大的问题，因为随着移动设备型号数量的爆发式增长，手机屏幕尺寸越来越多样化，网页内容自适应屏幕尺寸进行显示的需求也就越来越强烈。原本可能通过百分比/媒体查询等简单手段就可以常见的适配问题，但是对于页面有复杂结构或者视觉上有特殊要求的，就需要通过其他手段来解决了。

像素基础

像素

像素是一个老生常谈的问题了。不论是做前端开发还是做UI设计，都离不开这个话题。其实真要深究起来，像素是一个十分复杂的概念。追溯到上世纪6、70年代，计算机的输出设备还是点阵式打印机，如何使打印机打印出文字和图形？科学家们研究出了很多点组成的阵列，通过控制每一个点的黑白，最终组成文字和图形。现代计算机的显示器也借鉴了这个设计，发明了像素。
像素分为两种：

物理像素

又称设备像素(Device Pixel, DP)，这是组成显示设备的最小单位。可以理解为显示器上的一个一个的点，这些点组成一个个阵列。因为这些点间隔太短，排布太密集，所以肉眼观察不到颗粒感，物理像素通过RGB显色系统，分别控制RGB三基色通道的明与暗，形成了各种颜色。这就是所谓的视觉欺骗效果。任何显示设备的物理像素的数量都是不变的，出厂前就已经设定好。
物理像素的单位是pt，计算公式为：

1pt = 1 / 72 inch

设备独立像素

设备独立像素(Density-independent Pixel, DIP)又称密度无关像素，可以认为是计算机坐标系统中的一个点，这个点代表一个可以由程序使用的虚拟像素。所以它是一种抽象出的逻辑像素。前端开发中用到的CSS像素（px像素及px衍生单位像素）就是一种典型的设备独立像素。这种像素有决定因素——PPI或DPI。

PPI

PPI名为每英寸像素。它是一个表示打印图像或显示器单位面积上像素数量的指数。一般用来计量电脑显示器，电视机和手持电子设备屏幕的精细程度。通常情况下，每英寸像素值越高，屏幕能显示的图像也越精细。
我们通常可以在手机的参数列表中发现名为“屏幕尺寸”的参数，比如说5.5inch。那么这个究竟是什么概念呢？这其实是手机对角线的长度，采用英寸为单位。
PPI的计算可以采用如下公式：
[图片上传失败...(image-25ca44-1550330376113)]

其中：

dp为屏幕对角线的分辨率
wp为屏幕横向分辨率
hp为屏幕纵向分辨率
di为屏幕对角线的长度(单