前言：这周工作中遇到移动端1px的问题。之前一直在写styles，并没有特别注意。还有rem原则。这些其实都是比较常见的移动端适配问题。现阶段主流的适配方案有两种。一个是flexible+rem，一个是vw看具体情况1.基本概念在了解具体解决方案的原理之前，先看一下一些基本概念：1.1.物理像素称为设备像素，它是显示设备中最小的物理组件之一。每个像素都可以根据操作系统设置自己的颜色和亮度。1.2.Device-independentpixel(density-independentpixel)设备无关像素也称为密度无关像素，可以认为是计算机坐标系中的一个点。这个点代表一个可以被程序使用的虚拟像素（比如CSS像素）。然后通过相关系统将其转换为物理像素。（在没有视网膜屏幕之前，设备独立像素等于物理像素）1.3CSS像素CSS像素是一个抽象单位，主要用于浏览器中以准确衡量网页上的内容。通常，CSS像素称为设备无关像素，简称DIP。1.4.设备像素比（devicepixelratio）设备像素比简称dpr，它定义了物理像素和设备独立像素之间的对应关系。它的值可以根据以下公式计算：设备像素比=物理像素/设备独立像素在JavaScript中，可以通过window.devicePixelRatio获取当前设备的dpr。在CSS中，可以通过-webkit-device-pixel-ratio、-webkit-min-device-pixel-ratio和-webkit-max-device-pixel-ratio进行媒体查询，针对不同的dpr设备做一些样式适配（这里只针对webkit内核浏览器和webviews）因此在dpr为2的iphone6、7、8设备中，一个设备无关像素为4个物理像素，所以css上设置的1px在其屏幕上占用2个物理像素像素，0.5px对应的是它能显示的最小单位。1.5.简单理解rem，rem是相对根元素的font-size计算的。在我们的解决方案中，rem单元用于根据的ont-size轻松计算元素的盒模型大小。而这个特性对我们来说特别有利。2.灵活的实现方案在了解了上面的一些相关概念之后，我们来看看实际的解决方案。淘宝有一个库叫lib-flexible，这个库就是用来解决H5页面终端适配的。我们把屏幕分成10等份，那么物理像素就是750=375*2，那么10rem=750px，1rem=75px；物理像素为1125=375*3，则10rem=1125px，1rem=112.5px；物理像素为1242=414*3，则10rem=1242px，1rem=124.2px；functionrefreshRem(){varwidth=docEl.getBoundingClientRect().width;如果（宽度/dpr>540）{宽度=540*dpr;}varrem=宽度/10;docEl.style.fontSize=rem+'px';flexible.rem=win.rem=rem;}2.1、1px物理像素解由此我们得到一个1px像素解。viewport的initial-scale具有缩放页面的效果。对于dpr=2的屏幕，1px压缩一半可以匹配设备像素比1px，可以通过设置缩放比例initial-scale为0.5=1/2来实现。以此类推，dpr=3的屏幕可以通过设置initial-scale为0.33=1/3来实现。
