1.vue:pxtorem.js main.js直接引用
!(function(n) {
var e = n.document,
t = e.documentElement,
i = 750,
d = i / 100,
o = "orientationchange" in n ? "orientationchange" : "resize",
a = function() {
var n = t.clientWidth || 320;
n > 750 && (n = 750);
t.style.fontSize = n / d + "px";
};
e.addEventListener &&
(n.addEventListener(o, a, !1),
e.addEventListener("DOMContentLoaded", a, !1));
})(window);
2.html:html,body { font-size: 100px; } 其他直接根據設計尺寸使用:px/100 = rem
<script type="text/javascript">
var deviceWidth, devicePer;
setHtmlFontSize();
if (window.addEventListener) {
window.addEventListener('resize', function () {
setHtmlFontSize();
}, false)
}
function setHtmlFontSize () {
if (document.documentElement.clientWidth<1000) {
deviceWidth = document.documentElement.clientWidth > 750 ? 750 : document.documentElement.clientWidth;
devicePer = 7.5;
}
document.getElementsByTagName('html')[0].style.cssText = 'font-size:' + deviceWidth / devicePer + 'px!important'
}
</script>