rem 原理与简介

一、rem 原理与简介

字体单位：

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

适配原理：

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

兼容性：

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

// 移动 web 独有的 viewport 标签
// initial-scale 初始缩放
// user-scaleable 用户是否可缩放

 

 

1rem = html 的 font-size

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

 

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

1、媒体查询

 

2、使用 js 方式

 

三、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)
}

 

转载于:https://www.cnblogs.com/qq-944286441/p/10746954.html