移動端布局rem em

標籤：content   document   其他屬性   統一   顯示   nts   body   down   缺點   

1、概念

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

rem作用於非根項目時，相對於根項目字型大小；rem作用於根項目字型大小時，相對於其出初始字型大小

優缺點：em就是為字型和行高而生的，有些時候子項目字型就應該相對於父元素，元素行高就應該相對於字型大小；而rem的有點在於統一的參考系

2、Rem布局原理

rem布局的本質是等比縮放，一般是基於寬度

3、比Rem更好的方案

vw —— 視口寬度的 1/100；vh —— 視口高度的 1/100

4、Rem的問題

1、首先是字型的問題，字型大小並不能使用rem，字型的大小和字型寬度，並不成線性關係，所以字型大小不能使用rem；由於設定了根項目字型的大小，會影響所有沒有設定字型大小的元素，因為字型大小是會繼承的

• 解決方案：在body中修正

• 追問 ： 字型的大小如何?響應式

通過修改body字型的大小來實現，同時所有設定字型大小的地方都是用em單位，對就是em，因為只有em才能實現，同步變化，我早就說過em就是為字型而生的

@media screen and (min-width: 320px) {    body {font-size: 16px}}@media screen and (min-width: 481px) and (max-width:640px) {    body {font-size: 18px}}@media screen and (min-width: 641px) {    body {font-size: 20px}}p {font-size: 1.2em}p a {font-size: 1.2em}

2、如果使用者在PC端瀏覽，頁面過寬怎麼辦？

一般我們都會設定一個最大寬度，大於這個寬度的話頁面置中，兩邊留白

var clientWidth = document.documentElement.clientWidth;clientWidth = clientWidth < 780 ? clientWidth : 780;document.documentElement.style.fontSize = clientWidth / 100 + ‘px‘;設定body的寬度為100rem，並水平置中body { margin: auto; width: 100rem } 

3、如果使用者禁用了js怎麼破？

首先可以添加noscript標籤提示使用者

<noscript>開啟JavaScript，獲得更好的體驗</noscript> 

給html添加一個320時的預設字型大小，保證頁面可以顯示

html {fons-size: 3.2px} 

如果你想要更好的體驗，不如添加媒體查詢吧

@media screen and (min-width: 320px) {    html {font-size: 3.2px}}@media screen and (min-width: 481px) and (max-width:640px) {    html {font-size: 4.8px}}@media screen and (min-width: 641px) {    html {font-size: 6.4px}}

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

移動端布局rem em