在CSS中,有很多可以用來設置尺寸或長度的單位,常見的有像px、em和rem等,那么這些單位有何區(qū)別呢?下面就為大家簡單介紹一下。
首先我們來看最常見的像素單位px,它是指像素(pixel)的縮寫,一個像素就是一副圖片或者屏幕上的一個點。因為像素的大小是固定的,所以使用px可以讓你準確地調(diào)整元素的大小和位置。但是缺點也很明顯,如果用戶的屏幕分辨率比較低的話,那么在寬屏幕上看到的效果可能會和在小屏幕上看到的效果差別很大。
接下來我們來看相對單位em,它是相對于元素的父元素的字體大小來計算的。如果父元素的字體大小是16px,那么1em就是16px,2em就是32px,以此類推。這個單位的好處是可以在窗口大小發(fā)生變化時,元素的大小也會相應的發(fā)生變化,這個是一種響應式設計,但是繼承嵌套關系可能會比較麻煩。
最后我們來看rem單位,它是相對于文檔根元素(html)的字體大小來計算的。這個單位的好處是方便控制整個頁面的元素大小,如果需要適配不同屏幕尺寸的話很適合使用,但是使用rem的話需要考慮到IE8及以下的兼容問題。
.box{ width: 200px; /*使用px*/ height: 1em; /*使用em*/ font-size: 0.8rem; /*使用rem*/ }
綜上所述,每個單位都有各自的優(yōu)勢和適應場景,根據(jù)實際需求來選擇最適合的單位可以讓我們的頁面更加美觀實用。
下一篇css常用的類名