移动端还原设计图页面自适应解决方案

最新推荐文章于 2024-05-09 08:06:17 发布

原创最新推荐文章于 2024-05-09 08:06:17 发布 · 1.8k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#移动端 #设计图 #自适应 #rem #750px

移动端同时被 2 个专栏收录

9 篇文章

订阅专栏

css

7 篇文章

订阅专栏

博客介绍了移动端设计图自适应相关内容，包含自用版、淘宝、人气进阶版和原始版、蓝湖、网易、京东、拼多多等。同时给出了多个参考链接，涉及设计稿为750px的原因、设计稿转换页面单位尺寸以及rem单位使用等信息技术知识。

自用版

function viewResponse() {
    ! function(e, t) {
        var n = t.documentElement,
            d = e.devicePixelRatio || 1;

        function i() {
            var cw = n.clientWidth > 750 ? 750 : n.clientWidth < 320 ? 320 : n.clientWidth;
            var e = cw / 7.5;
            n.style.fontSize = e + 'px';
        }
        if (function e() { t.body ? t.body.style.fontSize = '16px' : t.addEventListener('DOMContentLoaded', e) }(), i(), e.addEventListener('resize', i), e.addEventListener('pageshow', function(e) { e.persisted && i() }), d >= 2) {
            var o = t.createElement('body'),
                a = t.createElement('div');
            a.style.border = '.5px solid transparent', o.appendChild(a), n.appendChild(o), 1 === a.offsetHeight && n.classList.add('hairlines'), n.removeChild(o);
        }
    }(window, document);
}
viewResponse();

淘宝

! function(e, t) {
    var n = t.documentElement,
        d = e.devicePixelRatio || 1;

    function i() {
        var e = n.clientWidth / 3.75;
        n.style.fontSize = e + "px"
    }
    if (function e() { t.body ? t.body.style.fontSize = "16px" : t.addEventListener("DOMContentLoaded", e) }(), i(), e.addEventListener("resize", i), e.addEventListener("pageshow", function(e) { e.persisted && i() }), d >= 2) {
        var o = t.createElement("body"),
            a = t.createElement("div");
        a.style.border = ".5px solid transparent", o.appendChild(a), n.appendChild(o), 1 === a.offsetHeight && n.classList.add("hairlines"), n.removeChild(o)
    }
}(window, document)

人气（进阶版）

参考链接：https://www.jianshu.com/p/985d26b40199

! function(e) {
    function t(a) { if (i[a]) return i[a].exports; var n = i[a] = { exports: {}, id: a, loaded: !1 }; return e[a].call(n.exports, n, n.exports, t), n.loaded = !0, n.exports } var i = {}; return t.m = e, t.c = i, t.p = "", t(0) }([function(e, t) { "use strict";
    Object.defineProperty(t, "__esModule", { value: !0 }); var i = window;
    t["default"] = i.flex = function(normal, e, t) { var a = e || 100,
            n = t || 1,
            r = i.document,
            o = navigator.userAgent,
            d = o.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i),
            l = o.match(/U3\/((\d+|\.){5,})/i),
            c = l && parseInt(l[1].split(".").join(""), 10) >= 80,
            p = navigator.appVersion.match(/(iphone|ipad|ipod)/gi),
            s = i.devicePixelRatio || 1;
        p || d && d[1] > 534 || c || (s = 1); var u = normal ? 1 : 1 / s,
            m = r.querySelector('meta[name="viewport"]');
        m || (m = r.createElement("meta"), m.setAttribute("name", "viewport"), r.head.appendChild(m)), m.setAttribute("content", "width=device-width,user-scalable=no,initial-scale=" + u + ",maximum-scale=" + u + ",minimum-scale=" + u), r.documentElement.style.fontSize = normal ? "50px" : a / 2 * s * n + "px" }, e.exports = t["default"] }]);
flex(false, 100, 1);

人气（原始版）

参考链接：https://www.jianshu.com/p/b00cd3506782

(function(doc, win) {
    var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function() {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            if (clientWidth >= 640) {
                docEl.style.fontSize = '100px';
            } else {
                docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
            }
        };

    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

蓝湖

 !function(e, t) {
        function n() {
            document.documentElement.style.fontSize = document.documentElement.clientWidth / 18.75 + "px"
        }
        e.addEventListener("resize", n, !1),
        e.addEventListener("DOMContentLoaded", n, !1)
    }(window, document)

网易

@media screen and (max-width: 320px) {
    html {
        font-size:42.667px;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 321px) and (max-width:360px) {
    html {
        font-size:48px;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 361px) and (max-width:375px) {
    html {
        font-size:50px;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 376px) and (max-width:393px) {
    html {
        font-size:52.4px;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 394px) and (max-width:412px) {
    html {
        font-size:54.93px;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 413px) and (max-width:414px) {
    html {
        font-size:55.2px;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 415px) and (max-width:480px) {
    html {
        font-size:64px;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 481px) and (max-width:540px) {
    html {
        font-size:72px;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 541px) and (max-width:640px) {
    html {
        font-size:85.33px;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 641px) and (max-width:720px) {
    html {
        font-size:96px;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 721px) and (max-width:768px) {
    html {
        font-size:102.4px;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 769px) {
    html {
        font-size:102.4px;
        font-size: 13.33333vw
    }
}


@media screen and (min-width: 769px) {
    html {
        font-size:102.4px
    }

    html .wap-wrap {
        width: 768px;
        margin: 0 auto
    }
}

京东

@media only screen and (min-width: 320PX) and (max-width:360PX) {
    html {
        font-size:13.65px
    }
}

@media only screen and (min-width: 360PX) and (max-width:375PX) {
    html {
        font-size:15.36px
    }
}

@media only screen and (min-width: 375PX) and (max-width:390PX) {
    html {
        font-size:16px
    }
}

@media only screen and (min-width: 390PX) and (max-width:414PX) {
    html {
        font-size:16.64px
    }
}

@media only screen and (min-width: 414PX) and (max-width:640PX) {
    html {
        font-size:17.664px
    }
}

@media screen and (min-width: 640PX) {
    html {
        font-size:27.31px
    }
}

拼多多

@media only screen and (max-width: 768px) {
    html {
        font-size:204.8px
    }
}

@media only screen and (max-width: 640px) {
    html {
        font-size:170.66667px
    }
}

@media only screen and (max-width: 480px) {
    html {
        font-size:128px
    }
}

@media only screen and (max-width: 414px) {
    html {
        font-size:110.4px
    }
}

@media only screen and (max-width: 412px) {
    html {
        font-size:109.86667px
    }
}

@media only screen and (max-width: 400px) {
    html {
        font-size:106.66667px
    }
}

@media only screen and (max-width: 393px) {
    html {
        font-size:104.8px
    }
}

@media only screen and (max-width: 375px) {
    html {
        font-size:100px
    }
}

@media only screen and (max-width: 360px) {
    html {
        font-size:96px
    }
}

@media only screen and (max-width: 345px) {
    html {
        font-size:92px
    }
}

@media only screen and (max-width: 320px) {
    html {
        font-size:85.33333px
    }
}

html {
    font-size: 26.66667vw;
    -webkit-text-size-adjust: none
}