详解html5页面 rem 布局适配方法

详解详解html5页面页面 rem 布局适配方法布局适配方法

本篇文章主要介绍了详解html5页面 rem 布局适配方法，小编觉得挺不错的，现在分享给大家，也给大家做个参

考。一起跟随小编过来看看吧

rem 布局适配方案布局适配方案

主要方法为：

1. 按照设计稿与设备宽度的比例，动态计算并设置 html 根标签的 font-size 大小；

2. css 中，设计稿元素的宽、高、相对位置等取值，按照同等比例换算为 rem 为单位的值；

3. 设计稿中的字体使用 px 为单位，通过媒体查询稍作调整。

var winWidth = window.innerWidth;

// doc.documentElement.style.fontSize = (winWidth / 640) * 100 + 'px' ;

// 640宽度以上进行限制 需要css进行配合

var size = (winWidth / 640) * 100;

doc.documentElement.style.fontSize = (size < 100 ? size : 100) + 'px' ;

}

var evt = 'onorientationchange' in win ? 'orientationchange' : 'resize';

var timer = null;

win.addEventListener(evt, function () {

timer = setTimeout(setFontSize, 300);

}

}, false);

// 初始化

setFontSize();

}(window, document));

高配精确版本：

(function(WIN) {

var setFontSize = WIN.setFontSize = function (_width) {

var docEl = document.documentElement;

var rem = width / 10;

console.log(rem);

docEl.style.fontSize = rem + 'px';

// 误差、兼容性处理

var actualSize = win.getComputedStyle && parseFloat(win.getComputedStyle(docEl)["font-size"]);

if (actualSize !== rem && actualSize > 0 && Math.abs(actualSize - rem) > 1) {

var remScaled = rem * rem / actualSize;

docEl.style.fontSize = remScaled + 'px';

}

}