H5移动端rem转成rpx
作者: 时间:2023-10-02阅读数:人阅读
现在移动端的宽度一般都是以750为标准的去设计的
但是呢,H5不支持rpx,Vue也不支持这个单位,但是我们可以用别的单位去替代它,那个单位就是rem。
Rem单位
Rem 单位提供最伟大的力量并不仅仅是他们提供一致尺寸而不是继承。 相反,它给我们的一个途经去获取用户的偏好来影响网站中每一处使用rem的元素大小,不再是使用固定的 px 单位。
为此,使用 rem 单位的主要目的应该是确保无论用户如何设置自己的浏览器,我们的布局都能调整到合适大小。
rem 单位基于 html 元素的字体大小
rem 单位基于 html 元素的字体大小
rem 单位基于 html 元素的字体大小
重要的事情打三遍
所以,我们可以修改html的fontsize的大小来让rem等于rpx
代码
在js中加入以下代码
let screenWidth=document.documentElement.clientWidth//获取屏幕的宽度
let centerWH=750/screenWidth//比例
document.documentElement.style.fontSize=1/centerWH+'px' //设置html根元素fontsize的大小
这样,你css中的rem就等于rpx了,屏幕宽度为750rpx,也就是750rem,快去试试吧
`
本站所有文章、数据、图片均来自互联网,一切版权均归源网站或源作者所有。
如果侵犯了你的权益请来信告知我们删除。邮箱:licqi@yunshuaiweb.com