em布局/rem布局
em和rem的區別
在了解彈性布局前我們需要先知道em和rem
rem：font size of the root element，rem是相對於根元素<html>來設置字體大小的，這就意味着，我們只需要根據自己的需求在根元素確定一個參考值。
em：以使用em為單位的元素本身的font-size大小為參考點，標准不統一，容易造成混亂
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%
得到我們需要的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計算不准確。
針對這個現象，可以嘗試設置html字體為100px，body 修正為16px，這樣 0.1rem 就是 10px，而body的字體仍然是默認大小，不影響未設置大小的元素的默認字體的大小。
概念
彈性布局是指通過調整其內元素的寬高（彈性容器擴展其內元素來填充可用空間，或將其收縮來避免溢出），從而在任何顯示設備上實現對可用顯示空間最佳填充的能力
布局特點
這類布局的特點是，包裹文字的各元素的尺寸采用em/rem做單位，使用 em 或 rem 單位進行相對布局，相對%百分比更加靈活，同時可以支持瀏覽器的字體大小調整和縮放等的正常顯示，因為em是相對父級元素的原因沒有得到推廣，
使用rem單位的彈性布局在移動端也很受歡迎
其實在移動端使用所謂的彈性布局，是比較勉強的。移動端彈性布局流行起來的原因歸根結底是rem單位對於（根據屏幕尺寸）調整頁面的各元素的尺寸、文字大小時比較好用。其實，使用vw、vh等后起之秀的單位，可以實現完美的流式
布局（高度和文字大小都可以變得“流式”），彈性布局就不再必要了。
優點
-
如果執行正確，這種布局方式可以非常方便。我們的目標是根據用戶的偏好，讓一切都能按比例放大和縮小。
-
對於既愛固定布局又愛流體布局的設計師，彈性布局是完美的，因為它們各自的優點都可以在彈性布局中找到=
- 理想狀態是所有屏幕的高寬比和最初的設計高寬比一樣，或者相差不多，完美適應
缺點
- 這種rem+js只不過是寬度自適應，高度沒有做到自適應，一些對高度，或者元素間距要求比較高的設計，則這種布局沒有太大的意義。如果只是寬度自適應，更推薦響應式設計。
綜合結論
1.如果只做pc端，那么靜態布局（定寬度）是最好的選擇；
2.如果做移動端，且設計對高度和元素間距要求不高，那么彈性布局（rem+js）是最好的選擇，一份css+一份js調節font-size搞定；
3.如果pc，移動要兼容，而且要求很高那么響應式布局還是最好的選擇，前提是設計根據不同的高寬做不同的設計，響應式根據媒體查詢做不同的布局。
參考