基于rem布局 - 移动端自适应解决方案

为了让移动端网页在不同尺寸的手机下都可以优雅地展示，可以用媒体查询、百分比布局、弹性布局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事件。】

基于rem布局 - 移动端自适应解决方案

猜你喜欢