rem适配原理

目录

rem含义

图解

公式

屏幕适配

方案一：媒体查询

方案二：flexible.js

---

rem含义

w3c的定义是相对于根元素的字体大小（font-size）在根元素的font-size属性中指定时，rem单位是指属性的初始值

这意味着1rem等于html元素的字体大小。

图解

公式

属性: 设计稿中元素的尺寸 / (设计图大小 / 分成的分数) * 屏幕中一份的大小(rem)

如上图就是 width: 16 / (640 / 20) * rem 

屏幕适配

方案一：媒体查询

@media screen and (width: 320px) {
  html {
    /* 在320宽的屏幕中 一份是 16px，即1rem */
    font-size: calc(320px / 20);
  }
}


@media screen and (width: 375px) {
  html {
    /* 在375宽的屏幕中 一份是 18.75px，即1rem */
    font-size: calc(375px / 20);
  }
}


@media screen and (width: 360px) {
  html {
    /* 在360宽的屏幕中 一份是 18px，即1rem */
    font-size: calc(360px / 20);
  }
}

上面的方案，只能适配的是写了媒体查询的手机，写不到的就适配不了

方案二：flexible.js

在工作中 我们其实没有这么干过，但是上面的方案是可行的，工作中用的是什么方案呢？

淘宝用的 flexible.js

flexible.js 的作用: 为了不写媒体查询(因为市场上手机类别太多 ，写多少媒体查询都不足以适配所有手机)

flexible.js的使用步骤：

1.先要确定 你的设计图多宽  640  750 1125

2.下载插件两个文件：flexible_css.debug.js、flexible.debug.js

3. 以前这么写: 元素的尺寸/32rem;  现在用了flexible这样写: 元素的尺寸/设计图宽度/10*rem