您当前的位置: 首页 > 技术文章 > 前端开发

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

标签: css css3 html
加载中~
如果您对我们的成果表示认同并且觉得对你有所帮助可以给我们捐赠。您的帮助是对我们最大的支持和动力!
捐赠我们
扫码支持 扫码支持
扫码捐赠,你说多少就多少
2
5
10
20
50
自定义
您当前余额:元
支付宝
微信
余额

打开支付宝扫一扫,即可进行扫码捐赠哦

打开微信扫一扫,即可进行扫码捐赠哦

打开QQ钱包扫一扫,即可进行扫码捐赠哦