移動端布局js動態計算rem動態設定頁面的字型大小

var html = document.documentelement;

var htmlw = html.clientwidth;
html.style.fontsize = htmlw / 10.8 + "px";

var pixelratio = 1 / window.devicepixelratio;

console.log(window.devicepixelratio); //畫素比
document.write(
''); //動態設定視口
function setsize() 
setsize();
window.addeventlistener("resize", setsize, false); //自動跳轉不需要重新整理頁面
window.addeventlistener("orientationchange", setsize, false);

引入：頁面開頭處引入下面這段**，用於動態計算font-size 引入後：除以100並將px換成rem

(function(doc, win) 

// 乘以100，px : rem = 100 : 1
docel.style.fontsize = 100 * (width / 750) + 'px';
};recalc()
if (!doc.addeventlistener) return;
win.addeventlistener(resizeevt, recalc, false);
})(document, window);

未引入前：

body

body

// 乘以100，px : rem = 100 : 1

var recalc = function() 
// 乘以100，px : rem = 100 : 1
docel.style.fontsize = 100 * (width / 750) + 'px';
};

;

(function(win, lib) );
if (metael) 
} else if (flexibleel) 
if (maximumdpr) }}
if (!dpr && !scale) else if (devicepixelratio >= 2 && (!dpr || dpr >= 2)) else 
} else 
scale = 1 / dpr;
}docel.setattribute('data-dpr', dpr);
if (!metael) else 
}function refreshrem() 
var rem = math.floor(100 * (width / 750));
docel.style.fontsize = rem + 'px';
flexible.rem = win.rem = rem;
}win.addeventlistener('resize', function() , false);
win.addeventlistener('pageshow', function(e) 
}, false);
if (doc.readystate === 'complete') else , false);
}refreshrem();
flexible.dpr = win.dpr = dpr;
flexible.refreshrem = refreshrem;
flexible.rem2px = function(d) 
return val;
}flexible.px2rem = function(d) 
return val;
}})(window, window['lib'] || (window['lib'] = {}));

未引入前：

body

@font-size-base: 75;

body

function refreshrem() 

var rem = math.floor(width / 10);
docel.style.fontsize = rem + 'px';
flexible.rem = win.rem = rem;
}

如果想轉化為px : rem = 100 : 1，可以修改上面的refreshrem函式：

function refreshrem() 

var rem = math.floor(100 * (width / 750))
docel.style.fontsize = rem + 'px'
flexible.rem = win.rem = rem;
}

未引入前：

body

body

function refreshrem() 

var rem = 100 * (width / 750)
docel.style.fontsize = rem + 'px'
flexible.rem = win.rem = rem;
}

移動端rem布局

時隔半年，再次回顧移動端開發，感覺自己又張知識了 我們平常用的較多的單位是px,百分比，rem,em,vw,vh，但是在移動端用的比較多的還是rem，但是他在用的過程中要注意什麼呢，怎麼用呢，下面就開始啦。他是乙個度量單位，可以用他作為高寬，字型的單位。他以html中設定font size的大小為基...

rem移動端布局

1 rem是css3新增的相對長度單位，是指相對於根元素html的font size計算值的大小。簡單可理解為螢幕寬度的百分比。2 什麼是dpr?dpr是螢幕畫素密碼比 計算 dpr 液晶螢幕px尺寸 物理尺寸 量多少就是多少 常用的dpr有 dpr 2，dpr 3 window.devicepix...

移動端rem布局

什麼是rem rem是css3新增的乙個相對單位 root em，根em 這個單位與em有什麼區別呢？區別在於使用rem為元素設定字型大小時，仍然是相對大小，但相對的只是html根元素。em 作為font size的單位時，其代表父元素的字型大小，em作為其他屬性單位時，代表自身字型大小 mdn r...