什么是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。

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

方法二、自己写js功能监听屏幕大小改变而改变fontSize

根据

实际屏幕：实际字体大小 = 设计屏幕：设计字体大小

这个比例可得

实际字体大小 = （实际屏幕*设计字体大小）/ 设计屏幕

又因为1rem = 1fontSize，所以只需将设计字体大小设为1px，即可令1rem=1px（设计字体大小），写代码时将px单位改为rem即可，不需要再用插件换算
注意：fontSize在此时被设为了1px，所以还需要给html的css加上一句font-size=16rem；重置页面根的fontsize

(function(){  
    change();  
    function change(){     
    	/* 假设设计屏幕宽度为1920px */
         document.documentElement.style.fontSize = document.documentElement.clientWidth*1/1920 + 'px';  
    }    
 /* 监听窗口大小改变时 */
  window.addEventListener('resize',change,false);})();