css3中rem和px的區(qū)別是:px是相對(duì)長(zhǎng)度單位,是相對(duì)于顯示器屏幕分辨率而言的;而rem雖然也是相對(duì)單位,但是是相對(duì)于HTML根元素而言的。
本教程操作環(huán)境:windows10系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
css3中rem和px有什么區(qū)別
1、px是相對(duì)長(zhǎng)度單位,它是相對(duì)于顯示器屏幕分辨率而言的。
優(yōu)缺點(diǎn):比較穩(wěn)定和精確,但在瀏覽器中放大或縮放瀏覽頁(yè)面時(shí)會(huì)出現(xiàn)頁(yè)面混亂的情況。
3、rem是CSS3新增的一個(gè)相對(duì)單位,REM是相對(duì)單位,是相對(duì)HTML根元素。當(dāng)在根元素中使用rem設(shè)置font-size時(shí),此時(shí)的1rem等于瀏覽器默認(rèn)字體大小,大多數(shù)瀏覽器默認(rèn)大小為16px
這個(gè)單位可謂集相對(duì)大小和絕對(duì)大小的優(yōu)點(diǎn)于一身,通過(guò)它既可以做到只修改根元素就成比例地調(diào)整所有字體大小,又可以避免字體大小逐層復(fù)合的連鎖反應(yīng)。
拓展資料
px:
px實(shí)際上就是像素,用PX設(shè)置字體大小時(shí),比較穩(wěn)定和精確。
但是這種方法存在一個(gè)問(wèn)題,當(dāng)用戶在瀏覽器中瀏覽我們制作的Web頁(yè)面時(shí),如果改變了瀏覽器的縮放,這時(shí)會(huì)使用我們的Web頁(yè)面布局被打破,這樣對(duì)于那些關(guān)心自己網(wǎng)站可用性的用戶來(lái)說(shuō),就是一個(gè)大問(wèn)題了。
rem:
rem是CSS3新增的一個(gè)相對(duì)單位(root em,根em),使用rem為元素設(shè)定字體大小時(shí),仍然是相對(duì)大小,但相對(duì)的只是HTML根元素。這個(gè)單位可謂集相對(duì)大小和絕對(duì)大小的優(yōu)點(diǎn)于一身,通過(guò)它既可以做到只修改根元素就成比例地調(diào)整所有字體大小,又可以避免字體大小逐層復(fù)合的連鎖反應(yīng)。
例子:
p {font-size:14px; font-size:.875rem;}
(學(xué)習(xí)視頻分享:css視頻教程)