移动端适配

一、为什么要做移动端适配

一般，前端拿到的设计图，都是375，或者是750，但是面对百花齐放的移动端屏幕，似乎这2个尺寸的图，无法满足所有的屏幕，让设计们针对每一个屏幕都做一份图出来，也是不现实的事，于是，便有了前端的移动端适配。

请看下表：

手机	分辨率 (pt)	分辨率(px)	像素比
iPhone 12	390x844	1170x2532	3
iPhone 11	414x896	828x1792	2
iPhone x	375x812	1125x243	3
iPhone 8	375x667	750x1334	2

不同手机屏幕，一个pt代表的px是不同的，当我们写css，1px的时候，渲染到屏幕上，可能是2px，可能是3px，并且不同的浏览器厂商，对小数的px，渲染结果也是不一样，这就导致了经典的移动端1px问题。

二、如何解决

• 在web中，浏览器为我们提供了window.devicePixelRatio来帮助我们获取dpr
• 在css中，可以使用媒体查询min-device-pixel-ratio，区分dpr
• rem是CSS3新增的一个相对单位。使用rem为元素设定字体大小时，是相对的只是HTML根元素的fontsize大小。

基于上述3个api，开发者可以根据不同设备，设置不同的html fontsize。

假如设计图是750px，那么我们通常利用如下公式，来设置html元素的fontsize属性

1rem=htmlFontSize=设备宽度÷设计稿定义的是几rem

还有另一种解决方案

使用vw、vh

vh、vw方案即将视觉视口宽度 window.innerWidth和视觉视口高度 window.innerHeight 等分为 100 份。

假如设计稿是750，页面有一个宽度100的元素，那么宽度应该设置为100/750vw

三、最后

随着webpack的不断发展，现在已经不需要我们手动来去计算到底是多少rem来，可以配置postcss-pxtorem插件，轻松实现转换，编码的时候只需要编写设计图是多大px，就写多大px即可。