前端页面适配的三种方式

[AndreGeng]

以750宽度的设计来说 一、 媒体查询 + rem 页面根元素设置font-size: 62.5%; 由于大多数浏览器的默认字体为16px, 则根元素的字体大小为10px. 对设计稿宽为x的元素，转换为rem = x/2/10 然后再通过媒体查询更改不同尺寸手机上的font-size @media screen and (min-width:360px) and (max-width:374px){ html { font-size: 70%; } } 优点：

1. 计算规则比较简单 缺点：
2. 只能算是近似适配
3. 中文版的chrome有字体不能小于12px的限制（需要把font-size设为625%）

二、等比例切分 我们可以把设计稿横向固定分为7.5份，那每份的权重为750/7.5 = 100 根元素的font-size设为${document.documentElement.width / 7.5}px 那对设计稿宽为x的元素，转换为rem = x/100 优点： 适配较为精准，换算简便，基本无兼容性问题。 缺点： 且针对iPhone的Retina屏没有做适配，导致对一些手机的适配不是很到位。

三、vw 现在大多数的移动端已支持了vw, 对设计稿来说100vw = 750px; 1vw = 7.5px 对设计稿宽为x的元素，转换为vw = x/7.5 优点： 适配较为精准，换算简便，部分浏览器支持性不佳。

reference: 如何在Vue项目中使用vw实现移动端适配 再聊移动端页面的适配

可以看下再聊移动端页面的适配里的1px线的实现方式。