屏幕适应之关于flexible.js的使用

什么是rem

rem是css的一个单位，其根据根元素的font-size大小设置rem的大小，1rem=1 font-size。即可通过改变font-size改变rem，适用于屏幕适应。

什么是flexible.js

flexible.js是用来使内容适应屏幕大小的插件。
原理是通过 js 动态修改根元素的 font-size 大小，设置1rem等于可视窗口的多少。
下图为部分源代码，表示设置font-size为窗口（1920px）的24分之一，即80px。

flexible.js的下载

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

下载解压后将index.js放在要用的项目中，并在html文件中引用。

flexible.js的使用

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

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

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

代码效果


若无效则重启vscode。

页面效果

完整屏幕宽度为1920px。

盒子大小为100px。

方块大小随着屏幕大小改变而改变，其与屏幕大小比例没变。