tft每日頭條

 > 生活

 > css中的寬和高怎麼計算

css中的寬和高怎麼計算

生活 更新时间:2024-12-02 11:04:03

css中的寬和高怎麼計算?px像素(pixel)px這個單位用得非常多,很常見,我們都耳熟能聞,我來為大家講解一下關于css中的寬和高怎麼計算?跟着小編一起來看一看吧!

css中的寬和高怎麼計算(CSS長度單位pxemrem)1

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每日頭條,我们将持续为您更新最新资讯!

查看全部

相关生活资讯推荐

热门生活资讯推荐

网友关注

Copyright 2023-2024 - www.tftnews.com All Rights Reserved