美文网首页时光轴
PC端rem的换算方法

PC端rem的换算方法

作者: 侯工 | 来源:发表于2018-07-02 14:37 被阅读22次

源码:

!function(e) {
    function t() {
        var t = n.clientWidth
            , i = "}";
        !navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i) && t > 1024 && (t = 640,
            i = ";max-width:" + t + "px;margin-right:auto!important;margin-left:auto!important;}"),
            e.rem = t / 10,
        /ZTE U930_TD/.test(navigator.userAgent) && (e.rem = 1.13 * e.rem),
        /Android\s+4\.4\.4;\s+M351\s/.test(navigator.userAgent) && (e.rem = e.rem / 1.05),
        /Android\s+5\.0\.1;\s+MX4\s/.test(navigator.userAgent) && (e.rem = 1.06382 * e.rem),
        /Android\s+4\.2\.2;[\s\w-;]+Coolpad\s8297[\s\w\S;]+UCBS/.test(navigator.userAgent) && (e.rem = .908 * e.rem),
            r.innerHTML = "html{font-size:" + e.rem + "px!important;}body{font-size:" + 12 * (t / 320) + "px" + i
    }
    var n = document.documentElement
        , r = document.createElement("style");
    n.firstElementChild.appendChild(r),
        e.addEventListener("resize", function() {
            t()
        }, !1),
        e.addEventListener("pageshow", function(e) {
            e.persisted && t()
        }, !1),
        t()
}(window);

使用方法:

本文设计图纸按:640PX

换算公式是:

元素的rem = 元素的宽 / 640 * 10


更多咨询请关注:
1、Git 汇总
2、VUE
3、前端开发

相关文章

网友评论

    本文标题:PC端rem的换算方法

    本文链接:https://www.haomeiwen.com/subject/oefluftx.html