rem是前端的一个长度单位,前端的单位有px(像素),em(相对于父元素),rem(相对于根节点),px一般应用与PC端,而移动端则多采用rem来达到更好的效果。
针对rem 主要有一下3中主流的适配方案:
1.媒体查询(不推荐)
// 计算rem的基准字体 $rem-base-font-size: 100px; // UI设计图的分辨率宽度 $UI-resolution-width: 1440px; @mixin html-font-size() { @media (min-width:320px){ html{ font-size: 320px / $UI-resolution-width * $rem-base-font-size; } } @media (min-width:360px){ html{ font-size: 360px / $UI-resolution-width * $rem-base-font-size; } } @media (min-width:375px){ html{ font-size: 375px / $UI-resolution-width * $rem-base-font-size; } } @media (min-width:412px){ html{ font-size: 412px / $UI-resolution-width * $rem-base-font-size; } } @media (min-width:480px){ html{ font-size: 480px / $UI-resolution-width * $rem-base-font-size; } } @media (min-width:640px){ html{ font-size: 640px / $UI-resolution-width * $rem-base-font-size; } } @media (min-width:720px){ html{ font-size: 720px / $UI-resolution-width * $rem-base-font-size; } } @media (min-width:768px){ html{ font-size: 768px / $UI-resolution-width * $rem-base-font-size; } } @media (min-width:1440px){ html{ font-size: 1440px / $UI-resolution-width * $rem-base-font-size; } } }
2.通过javaScript改变根节点大小
(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 / 640) + 'px'; } }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); })(document, window);
3.通过设置meta的缩放比例
! 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.cnblogs.com/gymmer/p/6883063.html
https://www.jianshu.com/p/b00cd3506782
https://www.jianshu.com/p/985d26b40199