Question

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

比如我写 .aa{height:16px;}
如果我用rem 那么是不是直接写.aa{height:1rem};
需不需要写其他的东西？？

Answer 1

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

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

追问

不是，你没听明白我的意思。。我是说用rem为单位 需不需要声明之类的东西？
还是说和px一样直接用，不需要任何声明 ？

追答

我上面回答的意思就是为了告诉你不需要声明啊。因为html的任何元素（包括html本身）即使不设置都有默认字体大小的，比如html元素默认的字体大小为16px，那么1rem就等于16px，但是当把html根元素的字体改变大小时，1rem的实际大小也会跟着改变，明白没有。
PS：css的任何度量单位都无需预先声明什么的

追问

那意思是我直接写就行了 是不是这个意思 大神

Answer 2

首先你需要知道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，以防出现意外情况。

Answer 3

!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

Answer 4

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