移動端rem布局

2021-10-10 14:55:43 字數 1414 閱讀 5503

什麼是rem

rem是css3新增的乙個相對單位（root em，根em）。這個單位與em有什麼區別呢？區別在於使用rem為元素設定字型大小時，仍然是相對大小，但相對的只是html根元素。

em:作為font-size的單位時，其代表父元素的字型大小，em作為其他屬性單位時，代表自身字型大小——mdn

rem:作用於非根元素時，相對於根元素字型大小；rem作用於根元素字型大小時，相對於其出初始字型大小——mdn

rem取值分為兩種情況，設定在根元素時和非根元素時，舉個例子來說

/* 作用於根元素，相對於原始大小（16px），所以html的font-size為32px*/


html


/* 作用於非根元素，相對於根元素字型大小，所以為64px */


p
總之：rem有rem的優點，em有em的優點，尺有所短，寸有所長，技術沒有什麼對錯，只有適合不適合，有對錯的是使用技術的人，傑出與優秀的區別就在於能否選擇合適的技術，並讓其發揮優勢。

rem布局原理

rem布局的本質是什麼？其實rem布局的本質是等比縮放，一般是基於寬度，試想一下如果ue圖能夠等比縮放，那該多麼美好啊

假設我們將螢幕寬度平均分成100份，每乙份的寬度用x表示，x = 螢幕寬度 / 100，如果將x作為單位，x前面的數值就代表螢幕寬度的百分比

p


/* 螢幕寬度的50% */
如果想要頁面元素隨著螢幕寬度等比變化，我們需要上面的x單位，不幸的是css中並沒有這樣的單位，幸運的是在css中有rem，通過rem這個橋梁，可以實現神奇的x

通過上面對rem的介紹，可以發現，如果子元素設定rem單位的屬性，通過更改html元素的字型大小，就可以讓子元素實際大小發生變化

html


phtml


p
如果讓html元素字型的大小，恆等於螢幕寬度的1/100，那1rem和1x就等價了

html


p
rem布局（**查詢）
/* 查詢螢幕 且 最小寬度是500px 的時候 w>=500px */


@media screen and (


min-width


:500px) }​


/* 查詢且寬度為500px的時候*/


@media screen and (


width


:500px) }


/* 寬度最大界值是500px w<=500px */


@media screen and (


max-width


:500px)


}

移動端rem布局

時隔半年，再次回顧移動端開發，感覺自己又張知識了 我們平常用的較多的單位是px,百分比，rem,em,vw,vh，但是在移動端用的比較多的還是rem，但是他在用的過程中要注意什麼呢，怎麼用呢，下面就開始啦。他是乙個度量單位，可以用他作為高寬，字型的單位。他以html中設定font size的大小為基...

rem移動端布局

1 rem是css3新增的相對長度單位，是指相對於根元素html的font size計算值的大小。簡單可理解為螢幕寬度的百分比。2 什麼是dpr?dpr是螢幕畫素密碼比 計算 dpr 液晶螢幕px尺寸 物理尺寸 量多少就是多少 常用的dpr有 dpr 2，dpr 3 window.devicepix...

移動端布局 REM

css單位有3種 px 絕對單位 em 相對父元素的單位 rem 相對根元素 頁面的html 的單位 css3新增的 什麼是rem？rem就是指相對根元素 頁面html 的單位。例如 html設定了font size為10px，那麼1rem就是10px，2rem就是20px html h1移動端布局...