1
/*页面大小自适应*/
(function () {
var b = document.documentElement,
a = function () {
var a = b.getBoundingClientRect().width;
b.style.fontSize = (100/1080) * (a >= 750 ? 750 : a) + "px"
}, c = null;
window.addEventListener("resize", function () {
clearTimeout(c);
c = setTimeout(a, 300)
});
a();
})();
2
/* rem.js文件内容 */
(function () {
var html = document.documentElement;
function onWindowResize() {
html.style.fontSize = html.getBoundingClientRect().width / 20 + 'px';
}
window.addEventListener('resize', onWindowResize);
onWindowResize();
})();
3.rem配置参数
rem配置参考:
html {font-size:10px}
@media screen and (min-width:480px) and (max-width:639px) {
html {
font-size: 15px
}
}
@media screen and (min-width:640px) and (max-width:719px) {
html {
font-size: 20px
}
}
@media screen and (min-width:720px) and (max-width:749px) {
html {
font-size: 22.5px
}
}
@media screen and (min-width:750px) and (max-width:799px) {
html {
font-size: 23.5px
}
}
@media screen and (min-width:800px) and (max-width:959px) {
html {
font-size: 25px
}
}
@media screen and (min-width:960px) and (max-width:1079px) {
html {
font-size: 30px
}
}
@media screen and (min-width:1080px) {
html {
font-size: 32px
}
}