关于rem问题。

Question

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设置不同的根元素大小吗？谢谢！

Answer 1

用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
然后自适应

Answer 2

DPI相同的手机表现出来的尺寸是一样的，DPI更大的手机比更小的手机表现上更小。如果需要在不同手机上看起来效果比例都一致的话，需要动态设置根节点font-size的值。设置方法参考楼上。