前端界面開發大小單位 px rem em的思考記錄
前端界面開發表示大小的單位有 px、rem、em。這三種有什麽區別呢？px指像素值，固定大小，較好理解。rem、em的區別呢？em是針對body中的font-size的倍數，rem是針對html的倍數。
1、em
em是針對body中font-size的倍數，font-size默認是24px
例：
body{font-size:62.5%;}
則：1em=10px
2、rem
rem是針對html的倍數
html {font-size: 62.5%; /**10 ÷ 16 × 100% = 62.5% 1rem = 10px **/}
body {font-size: 1.4rem; /**1.4 × 10px = 14px **/}
h1 { font-size: 2.4rem; /**2.4 × 10px = 24px**/}
3、px
4、line-height帶單位和不帶單位的區別
line-height:30px;
line-height:120%;
line-height:1.2
1）line-height:120%;代表行高為 父級元素.font-size*120%
2)line-height:1.2; 代表行高為 子級元素。font-size*1.2
移動端字體大小、margin、padding大小調節
傳統做法：
將設計圖縮放到320px，然後設置字體為rem，margin、border為px。（原因：margin、borer、padding為rem單位，換成px和原始數值有插入
改進後做法：
設計圖 640px ，定義body的width是6.4rem；font-size通過deviceWidth/6.4得到。
設計圖750px ，定義body的width是7.5rem；font-size通過deviceWidth/7.5得到。
deviceWidth可以通過document.documentElement.clientWidth可視寬度來獲取。那計算font-size的代碼如下：（7.5代表設計圖為750px)
document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + ‘px‘;
取100px為一個參照，之後的都是 長度/100rem
例：設計圖為750px
則 body中的width為 7.5rem
font-size=deviceWidth/7.5=750/7.5=100 px=1rem
設計圖為640
取100px為一個參照
則body中的width為6.4rem
font-size=1rem
上面代碼其實我和之前代碼是大體類似的。也是設置rem跟字體，以750寬度為基準，為100px,375寬度是50px。
前端界面開發大小單位 px rem em的思考記錄