如何使用rem，为什么rem不生效？

最新推荐文章于 2025-05-26 10:48:05 发布

孤独--患者

最新推荐文章于 2025-05-26 10:48:05 发布

阅读量1.2w

点赞数 1

CC 4.0 BY-SA版权

分类专栏： css3

本文链接：https://blog.youkuaiyun.com/qq_35484341/article/details/78248371

css3 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种使手机端字体大小能随屏幕变化而自动调整的方法。通过一段简单的JavaScript代码，可以实现在不同分辨率下字体大小的自适应，确保良好的阅读体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

rem是现在手机端用的比较普遍的单位，我最近也在用这个做一个手机站，在使用过程发现单纯的css并不能实现字体随屏幕放大缩小的效果，后来各种索搜，找到了解决方法

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<script>
(function(){
    function w() {
    var r = document.documentElement;
    var a = r.getBoundingClientRect().width;//获取当前设备的宽度
        if (a > 720 ){//720不固定，根据设计稿的宽度定
            a = 720;
        } 
        rem = a / 7.2;
        r.style.fontSize = rem + "px"
    }
    w();
    window.addEventListener("resize", function() {//监听横竖屏切换
        w()
    }, false);
})();
</script>
<style>
    p{font-size: 0.3rem}
</style>
<body>
<p>测试。。。。。测试。。。。。测试。。。。。测试。。。。。测试。。。。。</p>
</body>
</html>

我们只需加上上面代码中的那段js就可以了，然后我们写css只需要把对应的值除以100，单位改成rem即可

注意：1、这段js最好放到页面的body上面，让他第一时间加载，防止网速慢而导致屏幕闪烁问题

2、当写一像素边框时，最好还是使用1px来写，因为在部分手机上0.01rem不显示