rem 原理与简介

// 移动 web 独有的 viewport 标签
// initial-scale 初始缩放
// user-scaleable 用户是否可缩放
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scaleable=no">

<script type="text/javascript">
    // 获取视窗宽度
    let htmlWidth =
    document.documentElement.clientWidth || document.body.clientWidth
    console.log(htmlWidth)
 
 
    // 获取视窗高度
    let htmlDom = document.getElementsByTagName(‘html‘)[0]
 
 
    htmlDom.style.fontSize = htmlWidth / 10 + ‘px‘
</script>

// 封装
@function px2rem($px) {
    $rem: 37.5px // 以 iPhone 6 浏览器为基础 基准值就为 375 / 10 = 37.5
    @return ($px / $rem) + rem  // return 的值为 传进来的 px值 / rem基准值 + rem 单位
}
// 使用
.box {
    width: px2rem(100px)
  　height: px2rem(100px)
}