flexible.js的使用

flexible.js是用来使内容适应屏幕大小的插件。

rem，是相对单位，是相对HTML根元素，可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。

1、安装

github下载地址：https://github.com/amfe/lib-flexible

或：

npm i -S amfe-flexible

2、导入

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<script src="./node_modules/amfe-flexible/index.js"></script>

3、使用

1. 例如要转化为1rem=80px；将flexible.js中的10改为24，因为1920/24=80。

2. vscode安装cssrem插件（方便写代码时px与rem的换算）。

3. 修改扩展设置中的root font size值为80（设置1rem=80px）。

4. 代码效果。

若无效则需要重启vscode。