REM手机屏幕适配

xiaoxiao2021-02-28  88

以设计稿的宽度为750px(iphone6屏幕尺寸 的2两倍),即:designWidth = 750,同时设定在750px屏宽下 1rem=100px ,即:rem2px = 100。

设置 1rem=100px 的优点不言而喻。前端开发者在切图、重构页面的时候,通过直接位移小数点的方式,就可以将UI图中测量到的 px 值换算成对应的 rem 值,方便快捷。

此外,在 head 中我们还设置了:

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />

以下方法存在一些误差

document.documentElement.style.fontSize = ((window.innerWidth / designWidth) * rem2px) + 'px';

更多详细参考rem手机适配

转载请注明原文地址: https://www.6miu.com/read-84365.html

最新回复(0)