你不知道的css各種佈局（五）之em佈局、rem佈局

時間 2019-11-20

標籤不知道 css 各種佈局 rem 欄目 CSS 简体版

原文原文鏈接

em佈局/rem佈局

em和rem的區別

在瞭解彈性佈局前咱們須要先知道em和remcss

rem：font size of the root element，rem是相對於根元素<html>來設置字體大小的，這就意味着，咱們只須要根據本身的需求在根元素肯定一個參考值。html

em：以使用em爲單位的元素自己的font-size大小爲參考點，標準不統一，容易形成混亂chrome

em/rem與px的換算

瀏覽器的默認字體高度通常爲16px，即1em:16px，可是 1:16 的比例不方便計算，爲了使單位em/rem更直觀，CSS編寫者經常將頁面跟節點字體設爲62.5%，好比選擇用rem控制字體時，先須要設置根節點html的字體大小，由於瀏覽器瀏覽器

默認字體大小16px*62.5%=10px。這樣1rem即是10px，方便了計算。佈局

那麼爲何通常可能是 html{font-size:62.5%;} 而不是 html{font-size:10px;}呢？

由於有些瀏覽器默認的不是16px，或者用戶修改了瀏覽器默認的字體大小（因瀏覽器分辨率大小，視力，習慣等因素）。若是咱們將其設置爲10px，必定會影響在這些瀏覽器上的效果，因此最好用絕大多數用戶默認的16做爲基數 * 62.5% post

獲得咱們須要的10px。字體

html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/}
body {font-size: 1.4rem;/*1.4 × 10px = 14px */}
h1 { font-size: 2.4rem;/*2.4 × 10px = 24px*/}

實際項目設置成 font-size: 62.5%可能會出現問題，由於chrome不支持小於12px的字體，計算小於12px的時候，會默認取12px去計算，致使chrome的em/rem計算不許確。url

針對這個現象，能夠嘗試設置html字體爲100px，body 修正爲16px，這樣 0.1rem 就是 10px，而body的字體仍然是默認大小，不影響未設置大小的元素的默認字體的大小。spa

概念

彈性佈局是指經過調整其內元素的寬高（彈性容器擴展其內元素來填充可用空間，或將其收縮來避免溢出），從而在任何顯示設備上實現對可用顯示空間最佳填充的能力設計

佈局特色

這類佈局的特色是，包裹文字的各元素的尺寸採用em/rem作單位，使用 em 或 rem 單位進行相對佈局，相對%百分比更加靈活，同時能夠支持瀏覽器的字體大小調整和縮放等的正常顯示，由於em是相對父級元素的緣由沒有獲得推廣，

使用rem單位的彈性佈局在移動端也很受歡迎

其實在移動端使用所謂的彈性佈局，是比較勉強的。移動端彈性佈局流行起來的緣由歸根結底是rem單位對於（根據屏幕尺寸）調整頁面的各元素的尺寸、文字大小時比較好用。其實，使用vw、vh等後起之秀的單位，能夠實現完美的流式

佈局（高度和文字大小均可以變得「流式」），彈性佈局就再也不必要了。

優勢

若是執行正確，這種佈局方式能夠很是方便。咱們的目標是根據用戶的偏好，讓一切都能按比例放大和縮小。
對於既愛固定佈局又愛流體佈局的設計師，彈性佈局是完美的，由於它們各自的優勢均可以在彈性佈局中找到=
理想狀態是全部屏幕的高寬比和最初的設計高寬比同樣，或者相差很少，完美適應

缺點

這種rem+js只不過是寬度自適應，高度沒有作到自適應，一些對高度，或者元素間距要求比較高的設計，則這種佈局沒有太大的意義。若是隻是寬度自適應，更推薦響應式設計。

綜合結論

1.若是隻作pc端，那麼靜態佈局（定寬度）是最好的選擇；

2.若是作移動端，且設計對高度和元素間距要求不高，那麼彈性佈局（rem+js）是最好的選擇，一份css+一份js調節font-size搞定；

3.若是pc，移動要兼容，並且要求很高那麼響應式佈局仍是最好的選擇，前提是設計根據不一樣的高寬作不一樣的設計，響應式根據媒體查詢作不一樣的佈局。

參考

靜態佈局、自適應佈局、流式佈局、響應式佈局、彈性佈局等的概念和區別

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。