rem 一般是针对移动端而设置的,css3规定 1rem的大小就是根元素的font-size的值。
1、css
.title{
font-size: 0.1rem;
}
2、js
/*设置根元素<html>字体大小*/
function getRem() {
var html = document.getElementsByTagName("html")[0]; /*获取标签元素<html>*/
var oWidth =
document.body.clientWidth ||
document.documentElement
.clientWidth; /*获取设备的宽度 ||后为兼容IE低版本写法*/
console.log("oWidth", oWidth);
html.style.fontSize =
oWidth / 7.6 +
"px"; // 7.6: 表示设计稿宽度为760px;
}
/*页面初始化调用getRem()*/
window.onload = function () {
/*初始化*/
getRem();
/*getRem绑定监听*/
window.addEventListener("resize", getRem, false);
};