适配手机端之 rem

(function() {
var psdWidth = 1080,
maxRem = 100,
ch = document.documentElement.clientHeight || document.body.clientHeight,
cw = document.documentElement.clientWidth || document.body.clientWidth,
pageWidth; var calcRem = function() {
if (window.orientation && (window.orientation == 90 || window.orientation == -90)) {
pageWidth = Math.max(ch, cw);
} else {
pageWidth = Math.min(ch, cw);
} var rem = (pageWidth / psdWidth * 100).toFixed(2);
rem = Math.min(rem, maxRem);
window.rem = rem;
document.getElementsByTagName('html')[0].style.fontSize = rem + 'px';
}; calcRem(); window["onorientationchange" in window ? "onorientationchange" : "onresize"] = calcRem;
})();

  

  Eg. PSD中的width为378px,那么在手机端代码中为378/100=3.78rem.

上一篇:手机端使用rem的适配


下一篇:手机端布局rem 与vm的使用