css - 关于rem问题。

问题描述

问 题

html {

font-size: 62.5%;

/*10 ÷ 16 × 100% = 62.5%*/

}

body {

font-size: 1.4rem;

/*1.4 × 10px = 14px */

}

h1 {

font-size: 2.4rem;

/*2.4 × 10px = 24px*/

}
如果我这样设置了根元素，还需要再根据不同手机屏幕使用@media screen设置不同的根元素大小吗？谢谢！

解决方案

用js控制 比较全面
根据窗口大小自适应

<script>
    function setRemFontSize() {
        var remSize = window.innerWidth / 7.5;
        document.querySelector("html").style.fontSize = (remSize > 100 ? 100 : remSize) + "px";
    }
    setRemFontSize();
    window.addEventListener("resize", function () {
        setTimeout(function () {
            setRemFontSize();
        }, 200)
    });
</script>

以上代码 表示 当窗口大小为750px font-size为100px
然后自适应

这篇关于css - 关于rem问题。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！