思路

因为rem单位的特殊性,其是根据根元素<html>的字体大小来作为单位的,所以只需修改根元素的字体大小即可改变整个页面大小甚至是布局。

根据 mediaquery来设置

通过css mediaquery 来限定不同屏幕宽度而设置根元素的字体大小来实现适配。

使用javascript判断

首先在头部加上

1
2
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

其次使用js获得浏览器窗口宽度,这里我之前有篇文章详细说明了获取屏幕宽度 js获得浏览器宽高、屏幕宽高

其次把宽度除以10设为<html>的字体大小,即rem大小为十分之一浏览器窗口宽度

1
2
3
4
5
6
function setRem() {
var width = document.documentElement.clientWidth ? document.documentElement.clientWidth : window.innerWidth;
var rem = width / 10;
document.querySelector("html").style.fontSize = rem + "px";
}

然后监听 resize 事件来实时改变

1
2
3
4
window.addEventListener("resize", function() {
setRem();
});

Demo

新窗口打开Demo