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物理像素，會模糊