使用 flexible.js + rem 实现自适应的原理及示例

目录

一. 场景再现

二. 问题解决

2.1 前言

2.2 flexible.js + rem 使用步骤

2.2.1 将 flexible.js 引入项目，更改里面划分的份数（默认为 10）

2.2.2 计算基准 html 大小，计算方法： 设计稿宽度 / 划分份数

2.2.3 下载 vscode 插件 px to rem，并进行设置

2.2.4 重启 vscode，编写代码

---

一. 场景再现

• 设计稿：左边是菜单，上边是导航，下面是 iframe 嵌入的页面（写在单独的文件里）
• 

---

二. 问题解决

2.1 前言

• 之前采用 媒体查询，针对不同屏幕宽度，设置不同的基准 html 字体大小，写起来非常繁琐；
• 现在采用了淘宝的 flexible.js + rem 实现自适应，它替我们封装了自适应的方法；

---

2.2 flexible.js + rem 使用步骤

2.2.1 将 flexible.js 引入项目，更改里面划分的份数（默认为 10）

• 

---

2.2.2 计算基准 html 大小，计算方法： 设计稿宽度 / 划分份数

• 比如：设计稿大小是 1730，我划分了 24 份
• 那么基准 html 字体大小：1730 / 24 ≈ 72

• ---

  注意：此栗子中，设计稿其实是 1920 的，但是我嵌入的部分只有 1730，因此我的基准 html 字体大小是基于 1730 / 24 获得的

---

2.2.3 下载 vscode 插件 px to rem，并进行设置

• 

---

2.2.4 重启 vscode，编写代码

• 编写代码时，将对应的 px 单位，自动转换成  rem 单位，这样页面就是自适应的了