image.png
rem主要用于移动web开发，以适配不同尺寸的屏幕。下面看两个实际案例效果图：
image.png
image.png
通过代码发现页面元素是通过rem控制大小的。
rem为其他元素相对根元素（html）的大小
首先在Html里加入Meta标签设置浏览器的视窗的宽度，代码如下：
//视窗宽度为浏览器宽度，并且禁止用户缩放
<meta name="viewport" content=" initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
</head>
注意：此处的设置是视窗宽度跟浏览器的宽度保持一致，而不是跟设备宽度保持一致。
有些网站会在设置viewport属性时加入"width=device-width"，使得视窗宽度等于设备宽度。在移动端，大部分情况下，浏览器宽度等于设备宽度。但在Hybrid APP中会有例外的情况。例如ipad中，某个页面是原生APP页面，当点击某个按钮时，弹出原生对话框，原生对话框里面显示的是内嵌的web页面，这时，浏览器的宽度是对话框的宽度，并不是iPad的宽度。
通过js控制html根字体大小：
建一个文件rem.js，用来控制html根字体的大小：
(function () {
//获取<html>元素
var docEl = document.documentElement;
function setRem () {
var width = docEl.getBoundingClientRect().width;
//获取font-size的基准值
docEl.style.fontSize = width / 10 + 'px'
//这里的对应common.scss中的注释部分 docEl.style.fontSize = width / 16 + 'px'
alert(width)
}
setRem()
window.addEventListener('resize', setRem)
})()
common.scss中添加如下方法：
//px转换为rem计算
@function px2rem($px) {
$rem: 37.5px;
// $rem: 40px; //按640的设计稿，分成16等份，每等份640/16=40px
@return ($px / $rem)+rem;
}
调用：
<style lang='scss' scoped>
@import "~@/assets/common.scss";
.comprehensive-detail {
.name {
color: $blue;
font-size: px2rem(14px);
}
}
</style>
网友评论