rem與em的區別||結合使用rem與em
注意:谷歌瀏覽器最低支援的font-size為12px;
火狐和ie瀏覽器沒限制
rem:
作用:適用不同解析度的頁面
相對於根元素html;給html設定一個font-size;所有元素的長度單位都用rem(倍數關係),若html設定的font-size:10px;那麼2rem就是20px;
好處:不同解析度,只需要改變根元素html的font-size即可改變所有子元素的大小,且相對格局不變
em:
相對於父元素;給父元素設定font-size;該父元素下的所有子元素可以以em為單位來設定大小。
若父元素的font-size:10px;子元素設定2em即為20px;
頁面佈局中一般將rem和em結合
html{
font-size:10px
}
div{
width:10rem;//100px
height:10rem;//100px
//若不設定font-size則預設為html的10px
font-size :1.6rem//16px
}
div a{
font-size:2em//2倍父元素div的font-size的大小 32px
}
相關文章
- rem與em的使用和區別詳解REM
- em、rem、px、的區別REM
- 淺談px,em與remREM
- em 和 remREM
- css常用單位px、em、 rem 區別與各自的用法解析CSSREM
- px,em,rem,vw,vh之間的區別REM
- px em rem 探討REM
- 深入理解CSS中em, rem, ex區別,及使用技巧CSSREM
- CSS px、em和rem單位CSSREM
- css中的px、em、rem 詳解CSSREM
- rem和em的用法,你弄懂了嗎?REM
- px、em和rem實戰經驗REM
- 【基礎】EM 還是 REM?這是一個問題!REM
- EM
- ORACLE 11G OCM備考之建立EM與EM登陸異常的處理Oracle
- 三味Capsule:矩陣Capsule與EM路由矩陣路由
- remREM
- CSS 小結筆記之emCSS筆記
- FragmentContainerView、ViewPager、ViewPager2與 BottomNaviagtionView結合使用的區別FragmentAIViewpager
- CSS remCSSREM
- 移動端配適與掌握動態 REMREM
- 移動端使用rem原理REM
- 使用 rem 設計網頁REM網頁
- 可愛的remREM
- oracle EM 優化Oracle優化
- 動態 REMREM
- 動態REMREM
- 關於REMREM
- rem那些事REM
- rem佈局REM
- 04EM演算法-EM演算法收斂證明演算法
- EM演算法1演算法
- Oracle 19C EMOracle
- 03EM演算法-EM演算法流程和直觀案例演算法
- CSS3 remCSSS3REM
- rem適配方案REM
- rem佈局解析REM
- 強填EM演算法在理論與工程之間的鴻溝(上)演算法