使用rem单位

最新推荐文章于 2025-06-09 17:03:03 发布

原创最新推荐文章于 2025-06-09 17:03:03 发布 · 660 阅读

1 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

16 篇文章

订阅专栏

自适应布局：http://caibaojian.com/web-app-rem.html 看了这篇才发现原来我一直理解的是错的

同上：http://caibaojian.com/rem-responsive-2.html

原因：rem只能控制字体大小吗，在ff和chrome表现不一。目前中文版chrome浏览器的默认字体大小下限是12像素，把html根元素设置为62.5%时，rem单位的取值依然是以75%（12像素）计算的。REM单位用在文本大小上也的确没有什么问题。但用在排版、间距、宽高设定上，chrome依然会受“字体最小下限”影响，比如行高，宽度等等。

rem控制字体大小都兼容，控制其他可能不兼容，会受字体最小下限影响。那怎么解决呢？

解决方法：

参考网页：https://segmentfault.com/q/1010000002411895

之后又遇到不知名的问题，ul、li标签下的span莫名用了浏览器的默认样式，使得字体撑开的间距较大，后用line-height、vertial-align修正了。

第一个自适应页面，同时加深了对rem的理解，纪念一下。。。开心

后续。。。

使用rem布局，之前采用的是媒体查询，但是众所周知，媒体查询是max-width或min-width这种情况下设置根元素的font-size，导致只是在某一范围内根元素的font-size是同一个值，最终使得布局不是等比还原UI，有一定的误差。所以使用js获得根元素的font-size大小布局更加精准。

<script>
    var UI_width = 750;
    var dom = document.getElementsByTagName('html')[0];
    window.onresize = function(){dom.style.fontSize = dom.clientWidth*100/UI_width + 'px';}
</script>

原理：

其实很简单，就是获得浏览器当前可视区域的宽度*100/UI设计稿的宽度大小，就是当前html文档的根元素大小。UI_width是UI设计稿的宽度大小，根据实际情况定。

使用：

设计稿的div的大小/100rem

举例：对于750px的浏览器页面，根元素大小为100px；你需要的实际大小为20px，你设置的大小为0.2rem，此时100*0.2=20px，是你需要的大小。同理，350px的时候，根元素大小为50px；你设置的大小为0.2rem，此时50*0.2=10px，大小等比缩放。

至于为什么用的是clientWidth？看这篇文https://www.cnblogs.com/kongxianghai/p/4192032.html