CSS在移动端适配中的部分问题总结

一、像素

CSS即浏览器的渲染，而浏览器的渲染一定是基于像素而言的。对于像素，首先需要明确两个概念，即物理像素与逻辑像素。

1.物理像素

物理像素就是反映显示屏的硬件条件，反映的就是显示屏内部led灯的数量，可以简单理解，一组三色led代表一个物理像素，当然根据屏幕物理属性以及处理led的方法不一样。强调这是物理的，因为这是一个纯硬件指标。比如我把屏幕锯了一半，物理像素就只有一半。

2.逻辑像素

逻辑像素是为了调和距离不一样导致的差异，将所有设备根据距离，透视缩放到一个相等水平的观看距离之后得到的尺寸，是一个抽象的概念，这个单位就是ios开发的px，安卓开发的dp。对于pc，包括win（8+）， linux，mac，由各自系统的或者对应软件（比如webview内部）提供的图像界面处理引擎处理进行缩放。

在CSS中，我们通常选用px作为像素单位。对于PC端而言，CSS的px与物理像素一般可以等价来看，即默认情况下1920x1080分辨率的屏幕下对应渲染CSS 1920x1080px。但是，CSS中的px只是一个抽象的单位，在不同的设备或不同的环境中，CSS中1px所代表的物理像素数量是不同的。对于移动端而言，在早期的移动端设备中（如iphone3），屏幕像素密度较低（320x480），1px是可以与1个物理像素划等号的；但随着技术水平的发展，屏幕分辨率提升了1倍，但屏幕尺寸却不变，也就是说相同大小的屏幕上，物理像素增加了1倍，这时CSS的1px就不等于1个物理像素。还有一个因素也会引起css中px的变化，那就是用户缩放。例如，当用户把页面放大一倍，那么css中1px所代表的物理像素也会增加一倍；反之把页面缩小一倍，css中1px所代表的物理像素也会减少一倍。

ppi（屏幕在每英寸上的物理像素，移动端ppi一般以160为一个档次）的增加保证了屏幕渲染的高清晰度，但CSS的1px与物理像素的关系却发生了变化。试想，如果屏幕尺寸不变，物理像素增加一倍，同时逻辑像素与物理像素比例关系不变，那么实际渲染的大小将缩小一倍，这是无法容忍的。这里引出一个概念：dpr，

d