谈谈rem挪动端规划

2023年3月17日 112次阅读 来源: 一恭弘=叶 恭弘知秋

运用rem完成自适应规划，应当算是当前挪动前端的一大趋向，有些人对此另有点疑惑，搞不懂rem是怎样完成自适应规划，怎样依据设想稿来调解rem的值？rem规划怎样用雪碧背景图片？rem一定要加载JS吗？rem的根html font-size设置为若干适宜？看看这篇文章，或许能帮到你。

如果对你有效，还请点个赞，感谢!

em自适应道理
rem是依据html的font-size大小来变化，恰是基于这个动身，我们能够在每个装备下依据装备的宽度设置对应的html字号，从而完成了自适应规划。更多引见请看这篇文章：rem是怎样完成自适应规划的。

rem的值
现在有两种，一种是依据js来调解html的字号，另一种则是经由过程媒体查询来调解字号。

运用js

;(function(designWidth, maxWidth) {
    var doc = document,
        win = window;
    var docEl = doc.documentElement;
    var tid;
    var rootItem,rootStyle;

    function refreshRem() {
        var width = docEl.getBoundingClientRect().width;
        if (!maxWidth) {
            maxWidth = 540;
        };
        if (width > maxWidth) {
            width = maxWidth;
        }
        //与淘宝做法差别，直接采纳简朴的rem换算要领1rem=100px
        var rem = width * 100 / designWidth;
        //兼容UC最先
        rootStyle="html{font-size:"+rem+'px !important}';
        rootItem = document.getElementById('rootsize') || document.createElement("style");
        if(!document.getElementById('rootsize')){
        document.getElementsByTagName("head")[0].appendChild(rootItem);
        rootItem.id='rootsize';
        }
        if(rootItem.styleSheet){
        rootItem.styleSheet.disabled||(rootItem.styleSheet.cssText=rootStyle)
        }else{
        try{rootItem.innerHTML=rootStyle}catch(f){rootItem.innerText=rootStyle}
        }
        //兼容UC完毕
        docEl.style.fontSize = rem + "px";
    };
    refreshRem();

    win.addEventListener("resize", function() {
        clearTimeout(tid); //防备实行两次
        tid = setTimeout(refreshRem, 300);
    }, false);

    win.addEventListener("pageshow", function(e) {
        if (e.persisted) { // 浏览器退却的时刻从新盘算
            clearTimeout(tid);
            tid = setTimeout(refreshRem, 300);
        }
    }, false);

    if (doc.readyState === "complete") {
        doc.body.style.fontSize = "16px";
    } else {
        doc.addEventListener("DOMContentLoaded", function(e) {
            doc.body.style.fontSize = "16px";
        }, false);
    }})(640, 640);

你能够把上面的代码内嵌到html的head中，换算比例是1rem=100px，为了盘算轻易，你能够在我的一个github项目下载完全的构造和一个紧缩的js。

项目主页

上面代码中的症结代码是：

var width = docEl.getBoundingClientRect().width;
var rem = width * 100 / designWidth;
docEl.style.fontSize = rem + "px";

第一行代码，猎取挪动装备的宽度，第二行，rem的值即是(装备的宽度)x100/(设想稿宽度)，第三行，设置html的字号为第二行的值。
有些人可能会注意到第二行代码跟淘宝的谁人有所区分，区分就在于rem的换算比例，这里你能够恣意修改成现实中的状况，比方有人喜好用20px，那你能够将上面的100改成20，换算比例则改成1rem=20px。关于上面这段代码能够看之前的文章：Rem精简版完成自适应。
另有的人要用回淘宝的谁人，那末第二行代码能够变成var rem = width/10; 换算比例则改成依据设想稿的宽度来调解了，假定我们的设想稿宽是640的，则html的字体大小则被设为64px.则相当于1rem=64px。详细完成请看之前的文章：rem自适应规划-flexible。
运用媒体查询
说到底，上面的js代码不就是依据差别的装备调解对应的html字号嘛，那末我们依据现实的装备，来加上响应的字号不就行了吗？

我们晓得html的默许字号是16px，则对应的装备下能够经由过程设置对应的font-size使其有一致的缩放比例。

html {
font-size: 62.5%
}

@media only screen and (min-width: 481px) {
html {
font-size:94%!important
}
}

@media only screen and (min-width: 561px) {
html {
font-size:109%!important
}
}

@media only screen and (min-width: 641px) {
html {
font-size:125%!important
}

body {
max-width: 640px
}
}

上面的代码则是经由过程1rem=20px来换算的，从那里看出来呢？从最大的一个值640动身，如果你的设想稿是750的话，那你还要设想更多的媒体 查询，换算比例保持一致就能够了。那如果我想要换算比例为1rem=100呢？根据上面的划定规矩，最大的值为：html:font- size:100/16100%，别的的则按比例，比方480px，则为480/640(100/16*100%)。

其他适配体式格局 ：https://blog.csdn.net/irokay/…

    原文作者：一恭弘=叶 恭弘知秋
    原文地址: https://segmentfault.com/a/1190000015730431
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞