HTML/CSS 手机端中的长度单位rem 可以像px一样直接用吗？需不需要什么声明或者换算??

发布网友 发布时间：2022-04-06 11:43

我来回答

共4个回答

热心网友 时间：2022-04-06 13:13

rem一般用于设置字体的大小，1rem就是html根元素的字体大小，2rem就是html字体大小的2倍，1.5rem是html字体的1.5倍，0.75rem则是html字体大小的四分之三，依此类推。

因此，rem是一个相对长度单位，当改变html根元素的字体大小时，所有以rem为单位的字体大小也会跟着放大或缩小。
当然，它也可以用在其它地方，不一定是字体大小。比如要把某个元素的宽度设为5个字符的宽度，则 {width:5rem}

热心网友 时间：2022-04-06 14:31

首先你需要知道rem的意思是页面根元素的字体大小，即html的font-size。

默认情况下，html的font-size是16px，这个时候，你写height:1rem;就是height:16px;

但是，你要考虑到如果rem被改变了，比如你引入的第三方css或者js文件中设置了html的font-size:160px; 那么此时的height:1rem;代表着height:160px;

所以，建议你设置一下html的font-size，以防出现意外情况。

热心网友 时间：2022-04-06 16:05

!new function(){var a=this;a.width=750,a.fontSize=100,a.widthProportion=function(){var b=(document.body&&document.body.clientWidth||document.getElementsByTagName("html")[0].offsetWidth)/a.width;return b>1?1:b},a.changePage=function(){document.getElementsByTagName("html")[0].setAttribute("style","font-size:"+a.widthProportion()*a.fontSize+"px !important")},a.changePage(),window.addEventListener("resize",function(){a.changePage()},!1)};

引入这段js，设计图的750px = 7.5rem

热心网友 时间：2022-04-06 17:57

rem是需要声明之后才能用的，需要用到单位换算的工具。一般设计图都是以750px位参考，所以如果把页面分成15份的话就是：
1.此代码写在html页面中
<script>
//设置html的字体大小，将页面分成15份，即750/15=50

var oHtml=document.getElementsByTagName('html')[0];
oHtml.style.fontSize=window.screen.width/15+'px';
</script>
2. 在.less页面声明使用rem：
@r:50rem;
3.建议去了解less和sass