css中的寬和高怎麼計算?px像素(pixel)px這個單位用得非常多,很常見,我們都耳熟能聞,我來為大家講解一下關于css中的寬和高怎麼計算?跟着小編一起來看一看吧!
px像素(pixel)
px這個單位用得非常多,很常見,我們都耳熟能聞。
固定長度單位,不随其它元素的變化而變化,比較穩定和精确,不會因為其他元素的尺寸變化而變化,但在浏覽器中放大或縮放浏覽頁面時會出現頁面混亂的情況。
說他是相對長度單位,是相對于顯示器屏幕分辨率而言的。因為它取決于顯示器的分辨率,一旦确定分辨率,那麼設置的px尺寸就成為固定尺寸,不會自動縮放。
PC端使用較多,但是在移動端效果不好,因為手機分辨率種類很多,不可能一個個去适配,這時px就顯得非常無力,所以就要考慮用em和rem。
EM
相對長度單位,EM的值并不是固定的,它會繼承父級元素的字體大小,随父級元素的屬性(font-size或其它屬性)變化而變化。
如果當前對行内文本的字體尺寸未設置,則相對于浏覽器的默認字體尺寸。
任意浏覽器的默認字體高都是16px,為了方便使用,我們通常在CSS中的body選擇器中聲明font-size=62.5%(使em值變為:16px*62.5%=10px),之後隻需要将使用的px值除以10,即可得到em值,如:12px=1.2em,10px=1em。
REM(root em)
rem是CSS3新增的一個相對單位,相對于HTML根元素,它會随着HTML元素的屬性(font-size)變化而變化。
它的出現是為了解決em的缺點,em可以說是相對于父級元素的字體大小,當父級元素字體大小改變時,又得重新計算。
rem隻會相對于html的值,不會受到父級的影響,所以隻要在html标簽上設置字體大小,文檔中的字體大小都會以此為參照标準,一般用于自适應布局。
目前,除了IE8及更早版本外,基本上所有浏覽器都支持rem。
,更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!