移動端佈局之REM，以及實際使用總結
阿新 • • 發佈：2018-12-23
1.以rem 為單位，前端切圖，以640尺寸（保證放大的圖片質量）， width,height,padding,marging 等切距離，以320的尺寸，也可以以640的尺寸。
配合以下媒體查詢
html {
font-size: 62.5%;/* 10÷16=62.5% */
}
@media only screen and (min-width: 481px) {
html {
font-size: 94% !important;/* 10（480÷320）÷16=94% */
}
}
@media only screen and (min-width: 561px) {
html {
font-size: 109% !important;/* 10（560÷320）÷16=109% */
}
}
@media only screen and (min-width: 641px) {
html {
font-size: 125% !important;/* 10（640÷320）÷16=125% */
}
body {
max-width: 640px;
}
}
比如說320的設計稿，切 marging-top:10px; CSS 中 則寫 marging-top:1rem;
也可以用640的設計稿切距離，記得除以2，
比如640 切出margin-top:20px;font-size:24px;CSS中則寫 margin-top:1rem ;font-size: 1.2rem;
那實際瀏覽換算如下
320 中：1rem*62.5%*16px=10px;1.2rem*62.5%*16=12px;
560 中：1rem*109%*16px=17.44px;1.2rem*109%*16=20.928px;
640 中：1rem*125%*16px=20x;1.2rem*125%*16=24px;
1.不使用媒體查詢,動態的改變以rem為單位元素大小,切圖切距離以640的尺寸
<script>
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
if(clientWidth>=640){
docEl.style.fontSize = '100px';
}else{
docEl.style.fontSize = 50 * (clientWidth / 320) + 'px';// 用邊緣值代入 50*（640/320）px=100px;
}
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
</script>