详解 h5 活动页之移动端 rem 布局适配方法

搞定设计图了？想要还原布局可不容易哦得有本事和耐心！那今天我们就来聊聊这事儿，也许对大家有所帮助哟~

一、非精确的响应式设计

想快点搞好响应式设计？用媒体查询呗，超实用~简单地在页面上弄几个断点，看着屏幕大小换换样式，就能轻而易举搞定响应式效果！

缺点就是要用到断点，屏幕上的效果可能不尽如人意。而且如果设计图跟实际屏幕差距大的话，用媒体查询调节布局也是个挺头大的事情。

二、基于viewport的缩放方案

想让网页展示得跟设计图纸一样美吗？试试缩放工具！最简单的办法就靠viewport（设备视口）和rem（相对单位）这两个小伙伴了。手机上直接用viewport搞定就好。实际就是把网页显示的大小和设计图一致，然后计算出viewport的数值就可以咯。

别担心，这个办法就是调整ViewPort，使网页适应各种屏幕；但电脑上可做不到，还是乖乖设定固定尺寸。

(function () {
    var docEl = document.documentElement;
    var isMobile = window.isMobile /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Mobi/i.test(navigator.userAgent);
    function setScale() {
        var pageScale = 1;
        if (window.top !== window) {
            return pageScale;
        }
        var width = docEl.clientWidth || 360;
        var height = docEl.clientHeight || 640;
        if (width / height >= 360 / 640) {
            // 高度优先
            pageScale = height / 640;
        } else {
            pageScale = width / 360;
        }
        var content = 'width=' + 360 + ', initial-scale=' + pageScale 
          + ', maximum-scale=' + pageScale + ', user-scalable=no';
        document.getElementById('viewport').setAttribute('content', content);
        window.pageScale = pageScale;
    }
    if (isMobile) {
        setScale();
    } else {
        docEl.className += ' pc';
    }
})()

三、基于rem的布局适配方案

REM布局近来火得很，不少大型公司都在用！这是个根据设计稿与设备宽度的关系，能自动调节网页文字尺寸的神奇东西。比如说，我们只需要将设计图中的各种元素的宽、高、位置等等数据，按照比例换算成REM单位，然后在CSS里面输进去就行了。

咱能用HTML的font-size调整网页字大小跟屏尺寸走。无论什么手机上都能看起来跟设计一样！至于元素大小时高矮啊位置，设成rem就好，所以无论是啥屏，网页美感还在哦～

四、html标签的font-size动态计算

嘿哥们儿，改变HTML字体大小呢其实就是看你怎么搞这比例了。比如说，你可以把网页分成10块来看。就像这样子：

咱们来搞定一个元素大小换算公式，顺便把HTML根标签的字号也跟着屏幕宽窄变，这样不管啥屏幕大小，网页看起来都是美美的！

五、元素大小的取值

(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';
        }
    }
    var timer;
    //函数节流
    function dbcRefresh() {
        clearTimeout(timer);
        timer = setTimeout(setFontSize, 100);
    }
    //窗口更新动态改变 font-size
    WIN.addEventListener('resize', dbcRefresh, false);
    //页面显示时计算一次
    WIN.addEventListener('pageshow', function(e) {
        if (e.persisted) { 
            dbcRefresh() 
        }
    }, false);
    setFontSize();
})(window)

你可以想象一下，这张分辨率为1080像素的大图被分成了10块，每块都是108像素。比如我们要把这个460×210的小图放上去，放在321像素下面，再移到70像素左边去，CSS代码该怎么设置？

简单说，就是得先搞清楚比例，然后就能准确地得出每个部分的大小和位置了。

function adjustWarp(warpId = '#warp') {
    // if (window.isMobile) return;
    const $win = $(window);
    const height = $win.height();
    let width = $win.width();
    // 考虑导航栏情况
    if (width / height < 360 / 600) {
        return;
    }
    width = Math.ceil(height * 360 / 640);
    $(warpId).css({
        height,
        width,
        postion: 'relative',
        top: 0,
        left: 'auto',
        margin: '0 auto'
    });
    // 重新计算 rem
    window.setFontSize(width);
}

六、全屏显示的H5活动页调整

做H5全屏页面，别忘了注意下宽高比例，这样无论在哪种设备上都不会变形喔！

其实，我们的做法就是弄个换算比例，再看看要把H5全屏游戏弄成多大才能刚好符合当前情况！

七、字体使用的问题

const px2rem = function(px, rem = 108) {
    let remVal = parseFloat(px) / rem;
    if (typeof px === "string" && px.match(/px$/)) { 
        remVal += 'rem';
    }
    return remVal;
}

REMT缩放有点别扭的话，你就在媒体查询里调下字体尺寸！

这种方案的核心在于通过约定换算比例，动态计算字体的大小。

八、rem布局方案的开发方式

搞定REM布局其实不难，用LESS或者SASS预处理工具搞定，然后选择合适的混搭样式（也就是指定固定组合方式），最后依照设计图的尺寸设置大小就能达到想要的效果了。

.img_demo {
    position: absolute;
    background-size: cover;
    background-image: url('demo.png');
    top: 2.97222rem;
    left: 0.64814rem;
    width: 4.25926rem;
    height: 1.94444rem;
}

九、针对前文的示例元素的css样式

你看着设计图上面的元素大小就知道宽高。记得PS里面随便画个参考线就能得到top/left的数值了

十、总结与展望

搞定设计图还原，其实不难，只是要费功夫。放心，只要努力学习肯定没问题。希望这条注意事项对你有所帮助有啥疑问或建议尽管提，就在留言区。会尽快回复的哟～

// px 转 rem
.px2rem(@px, @attr: 'width', @rem: 108rem) {
    @{attr}: (@px / @rem);
}
.px2remTLWH(@top, @left, @width, @height, @rem: 108rem) {
    .px2rem(@top, top, @rem);
    .px2rem(@left, left, @rem);
    .px2rem(@width, width, @rem);
    .px2rem(@height, height, @rem);
}

亲爱滴朋友们，快来，跟大家分享下你们是咋还原布局的！为啥超爱这招？快到评论区坐坐，互相切磋进步呗！