详解详解html5页面页面 rem 布局适配方法布局适配方法
本篇文章主要介绍了详解html5页面 rem 布局适配方法,小编觉得挺不错的,现在分享给大家,也给大家做个参
考。一起跟随小编过来看看吧
rem 布局适配方案布局适配方案
主要方法为:
1. 按照设计稿与设备宽度的比例,动态计算并设置 html 根标签的 font-size 大小;
2. css 中,设计稿元素的宽、高、相对位置等取值,按照同等比例换算为 rem 为单位的值;
3. 设计稿中的字体使用 px 为单位,通过媒体查询稍作调整。
1 动态设置动态设置 html 标签标签 font-size 大小大小
精简通用版本:
!(function(win, doc){
function setFontSize() {
// 获取window 宽度
// zepto实现 $(window).width()就是这么干的
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 () {
clearTimeout(timer);
timer = setTimeout(setFontSize, 300);
}, false);
win.addEventListener("pageshow", function(e) {
if (e.persisted) {
clearTimeout(timer);
timer = setTimeout(setFontSize, 300);
}
}, false);
// 初始化
setFontSize();
}(window, document));
高配精确版本:
(function(WIN) {
var setFontSize = WIN.setFontSize = function (_width) {
var docEl = document.documentElement;
// 获取当前窗口的宽度
var width = _width || docEl.clientWidth; // docEl.getBoundingClientRect().width;
// 大于 1080px 按 1080
if (width > 1080) {
width = 1080;
}
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';
}
}
评论0