CSS3 rem
rem是相對單位,與em非常的類似。
em是相對於當前元素字型大小,比如當前div的字型大小是12px,那麼1rem=12px。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> * { margin:0px; padding:0px; } div{ font-size:12px; width:10em; height:10em; margin:1em; background:blue; } </style> </head> <body> <div></div> </body> </html>
div的字型大小是12px,那麼1em=12px,所以div元素的長寬分別是120px,外邊距是12px。
rem與em的原理完全一樣,但是它的參考物件是html根元素,程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> * { margin:0px; padding:0px; } html { font-size:16px; } div{ font-size:12px; width:10rem; height:10rem; margin:1rem; background:blue; } </style> </head> <body> <div></div> </body> </html>
html根元素的字型大小是16px,那麼div元素的長寬分別為160px,外邊距為16px。
相關文章
- 移動web適配利器-rem In CSS3WebREMCSSS3
- (高階)用CSS3新增的rem單位設定字型大小CSSS3REM
- css3中單位px,em,rem,vh,vw,vmin,vmax的區別CSSS3REM
- remREM
- CSS remCSSREM
- 關於REMREM
- 動態REMREM
- rem佈局REM
- rem那些事REM
- 動態 REMREM
- REM實戰REM
- em 和 remREM
- rem與em的區別||結合使用rem與emREM
- 可愛的remREM
- rem適配方案REM
- rem佈局解析REM
- sublime px -> rem sassREM
- em,rem和vhREM
- rem自適應解決方案·px2rem-loader&hotcssREMCSS
- Rem 等比適配始末REM
- rem 適配佈局REM
- rem計算推導REM
- px em rem 探討REM
- 移動端rem方案REM
- (移動端適配px轉rem)react配置rem外掛lib-flexible和postcss-px2rem-excludeREMReactFlexCSS
- em、rem、px、的區別REM
- 淺談px,em與remREM
- 移動端使用rem原理REM
- 使用 rem 設計網頁REM網頁
- rem移動端適配REM
- rem+vw、vh+sassREM
- CSS—相對單位remCSSREM
- rem自適應佈局REM
- rem響應式佈局REM
- Rem 字型設定學習REM
- 在 Vue 3 中配置 remVueREM
- 移動端適配-rem(新)REM
- web移動佈局所需:remWebREM