彈性布局建設網站時使用rem,em的好處
發布時間:2021-03-30來源:admin
<p>
1.rem,em區別:rem,em都是順應不同網頁字體大小展現而產生的。其中,em是相對其父元素,在實際應用中相對而言會帶來很多不便;而rem是始終相對于html大小,即頁面根元素。
</p>
<p>
2.使用 em 或 rem 單位進行相對布局,相對%百分比更加靈活,同時可以支持瀏覽器的字體大小調整和縮放等的正常顯示。
</p>
<p>
3.這類布局方式的特點是,包裹文字的元素使用rem,em 作為單位,而頁面的主要劃分區域則使用,%,px作為單位,這樣可以讓包裹文字的元素隨著文字的縮放而縮放。
</p>
<p>
4.用em/rem定義尺寸的另一個好處是更能適應縮進/以字體單位外邊距或內邊距/瀏覽器設置字體尺寸等情況(因為em/rem相對于字體大小,會同步改變)。
</p>
<p>
5.瀏覽器的默認字體高度一般為16px,即1em:16px,但是 1:16 的比例不方便計算,為了使單位em/rem更直觀,CSS編寫者常常將頁面跟節點字體設為62.5%,比如選擇用rem控制字體時,先需要設置根節點html的字體大小,因為瀏覽器默認字體大小16px*62.5%=10px。這樣1rem便是10px,方便了計算。<br />
<div>
<br />
</div>
</p>
<p>
<br />
</p>
<p>
<br />
</p>
<p>
<br />
</p>