為什么說“通常情況下1em=16px”？
用戶的瀏覽器默認渲染的文字大小是“16px”，換句話說，Web頁面中“body”及其子元素的文字大小在用戶瀏覽器下默認渲染是“16px”。
我們都知道：em（和 rem ）是一個相對單位！“相對”的意思是：
- 相對的計算必然有一個參考物，那么這里相對所指的就是父元素的
font-size。比如說：如果在一個 div 設置字體大小為“16px”，此時這個 div 的后代元素教程了是將繼承他的字體大小，除非重新在其后代元素中進行過顯示的設置。如果用戶通過瀏覽器的UI控件改變了文字的大小，那么我們整個頁面也會進行放大（或縮小），不至于用戶改變了瀏覽器的字體后會致使整個頁面崩潰！
只不過em是相對于父元素，而rem是相對于“根”元素（html）
em到底是怎樣的？
em：相對單位。其基準值是當前元素的字號大小；實際值則取決于它（繼承）的父元素。
經過筆者查閱資料+不斷測試，這其中有一個“不為人注意的”公式：
目標em值=目標像素值/父元素像素值
（↑：em是如何與父元素 font-size 產生聯系的
<body>
I'm <p>yunxiaomeng</p>.
</body>
body{
font-size: 16px;
}
p{
font-size: 1.2em;
}
看到圖中的紅線框了么？p標簽實際被渲染出的大小（目標像素值）為：16(px) x 1.2=19.2(px)
這里還有一個要特別注意的地方：如果同一個元素的另一個選擇器/屬性用了一個不一樣的字號值（font-size）去覆蓋前一個值，這將會改變 em 在這個域下的基準值！
比如，我們將上面的p中再加一個屬性：
p{
font-size: 1.2em;
padding: 1.2em;
}
那么 padding 的實際渲染值（目標像素值）= 19.2(px) x 1.2 = 23.04(px)（即16 x 1.2 x 1.2）：
這也是為什么你對每一層子元素都設置了 em 時其真正大小似乎并不是自己想要的！
（至于其中為什么有和font值一樣的margin，就要參考張鑫旭《CSS世界》中提到的“幽靈空白元素”了！）
rem也是這樣的？！
rem也是一個相對單位，它是相對于root根元素變化的。
它的計算方式和 em 的大差不差。但是這里有一個“常見的誤區”：一般我們可以通過頁面寬度動態更改根元素的 font-size 值來做響應適配：
let htmlWidth=document.documentElement.clientWidth || document.body.clientWidth;
let htmlDom=document.getElementsByTagName('html')[0];
window.onresize=function () {
htmlDom.style.fontSize=htmlWidth/20+'px';
};
但很多人會誤以為rem值是和“頁面大小對應的”。其實這是錯誤的！
而且目前來說完全可以通過css來做響應式：
html { font-size: calc(112.5% + 4 * (100vw - 600px) / 400); } 配合 媒體查詢 @media
到此這篇關于CSS中em的正確打開方式詳解的文章就介紹到這了,更多相關css打開em內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關文章，希望大家以后多多支持腳本之家！
