为了让移动端网页在不同尺寸的手机下都可以优雅地展示,可以用媒体查询、百分比布局、弹性布局flex、rem布局等。而rem布局在移动端开发中无疑是一种不错的自适应解决方案,核心就是
html根节点的font-size属性和
resize事件,以及
rem单位。
1、核心思路:当窗口或框架调整大小时会触发resize事件(页面首次加载则模拟触发),此时根据变化后文档的宽度重新计算文档根节点的基础font-size值,那么基于rem单位的DOM元素就会重新计算像素值并重新渲染。
2、关键代码:
/**
* 移动页面自适应布局-基于rem布局
* 当屏幕宽度为320px时,1rem代表20px
*/
(function(doc, win) {
var docEl = doc.documentElement;
var resizeEvt = 'orientationchange' in window ? 'orientationchange': 'resize';
var recalc = function() {
var clientWidth = docEl.clientWidth;
if (!clientWidth)
return;
docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
};
// 不同浏览器resize事件处理机制不同
// 使用定时器延迟处理resize回调函数以降低重复响应
var recalcTimer = null;
var delaycalc = function() {
win.clearTimeout(recalcTimer);
recalcTimer = win.setTimeout(recalc, 100);
};
// 移动端不需要考虑事件注册函数的兼容性
if (!doc.addEventListener)
return;
win.addEventListener(resizeEvt, delaycalc, false);
// DOMContentLoaded事件只在DOM文档树加载完毕触发,此处不用延迟处理
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
3、注意要点:
- 触发resize事件的操作:resizeTo 和 resizeBy、横纵屏操作、缩小放大页面窗口、拖动改变页面窗口等引起页面窗口大小改变的操作。
- 在 IE 和 Opera 等浏览器中,只要窗口的边框被改变一个像素,resize事件就会被触发;而在MozillaFirefox等其他浏览器中,只在停止对窗口的大小改变时才触发resize事件【优雅的解决方案——通过setTimeout定时器延迟100ms再执行resize事件。】