rem 原理与简介

一、rem 原理与简介

字体单位：

    值根据 html 根元素大小而定，同样可以作为宽度，高度等单位

适配原理：

    将 px 替换为 rem，动态修改 HTML 根元素的 font-size 适配

兼容性：

    Ios 6 以上 和  Android 2.1 以上，基本覆盖所有流行的手机系统

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

 

1rem = html 的 font-size

html 不设置 font-size 默认 1rem = 16px

 

二、如何根据不同屏幕设置 font-size 大小

1、媒体查询

<style type="text/css">   

   @media screen and (max-width: 320px) {

        html {

          font-size: 20px;

        }

      }  

    @media screen and (max-width: 360px) and (min-width: 321px) {

        html {

          font-size: 24px;

        }

      }

</style>

2、使用 js 方式

<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>

 

三、rem 与 scss 相结合

1、rem 基准值的计算

    rem 基准值就是 html 的 font-size

2、rem 数值计算与构建

    换算出的 px 值的 rem 的值

    如 1rem = 16px

    170px = 170/16 rem

3、rem 与 scss 相结合

// 封装
@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)
}