首頁  >  文章  >  web前端  >  css3中rem和px有什麼差別

css3中rem和px有什麼差別

WBOY
WBOY原創
2022-03-21 15:13:043029瀏覽

css3中rem和px的區別是:px是相對長度單位,是相對於顯示器螢幕解析度而言的;而rem雖然也是相對單位,但是是相對於HTML根元素而言的。

css3中rem和px有什麼差別

本教學操作環境:windows10系統、CSS3&&HTML5版、Dell G3電腦。

css3中rem和px有什麼區別

1、px是相對長度單位,它是相對於顯示器螢幕解析度而言的。

優缺點:比較穩定和精確,但在瀏覽器中放大或縮放瀏覽頁面時會出現頁面混亂的情況。

3、rem是CSS3新增的一個相對單位,REM是相對單位,是相對HTML根元素。當在根元素中使用rem設定font-size時,此時的1rem等於瀏覽器預設字體大小,大多數瀏覽器預設大小為16px

這個單位可謂集相對大小和絕對大小的優點於一身,透過它既可以做到只修改根元素就成比例地調整所有字體大小,又可以避免字體大小逐層複合的連鎖反應。

拓展資料

px:

px其實是像素,用PX設定字體大小時,比較穩定精確。

但是這種方法有一個問題,當使用者在瀏覽器中瀏覽我們製作的網頁頁面時,如果改變了瀏覽器的縮放,這時會使用我們的網頁佈局被打破,這樣對於那些關心自己網站可用性的使用者來說,就是一個大問題了。

rem:

rem是CSS3新增的一個相對單位(root em,根em),使用rem為元素設定字體大小時,仍然是相對大小,但相對的只是HTML根元素。這個單位可謂集相對大小和絕對大小的優點於一身,透過它既可以做到只修改根元素就成比例地調整所有字體大小,又可以避免字體大小逐層複合的連鎖反應。

範例:

p {font-size:14px; font-size:.875rem;}

(學習影片分享:css影片教學

以上是css3中rem和px有什麼差別的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn