rem、em 、font-size随着屏幕大小的改变而改变

rem  的根标签是html

以html标签上设置的font-size的值为参考点

如：

<div id="app">

　　<div id="son></div>

</div>

html{ font-size:20px; }

#app{

　　width :4rem; ===>4*20=80px

}

#son {
 　　width :2rem; ===>2*20 =40px

}

如果html的font-size 的值能随便屏幕的大小变化而变化

以下js代码放在头部，不要放body里

　　<script>
        resetrem();
        //切换屏幕 （横屏竖屏）
        window.addEventListener("orientationchange", resetrem);
        //resize：屏幕的大小发生改变就触发监听事件resetrem
        window.addEventListener("resize",resetrem);

        function resetrem(){
            var html = document.querySelector("html");//获取到html元素
            var width = html.getBoundingClientRect().width;//获取屏幕的宽度
            html.style.fontSize = width/16+"px";
        }
    </script>

 

 

UI图 width：414px，则css样式

在Ihone6/7/8  font-size=25.875px

{

　width：16 rem;   ==>414 / 25.875

}

 

 

em 根据父元素改变值

以父元素为参考点

比如：

<div id="app">

　　<div id="son></div>

</div>

#app{

　　font-size:10px;

}

#son{

　　font-size:1em; ==>1*10=10px

}

 

物理像素和css像素

正常情况下 1物理像素=1css像素

放大的时候 1css像素=3物理像素，会模糊