项目适配方案——flexible.js、less和rem的配合使用

1.在HTML页面引入flexble.js文件

 <!-- 引入js文件 -->
  <script src="./js/flexible.js"></script>

2.在less页面写上相关代码。包括：1）导出的css文件位置，2）是否导出xxx.css.map文件，3）屏幕大小的限制

//下面这行是代码，不是注释。表示输出位置是上一级文件夹的css；以及输出相应的css.map文件
//out:../css/, sourceMap: true

//定义屏幕大小
@media screen and(min-width:20rem) {
    html: 2rem;
}

@media screen and(min-width:8.5333rem) {
    html: 0.8533rem;
}

3.在vscode下载px-to-rem插件，在书写代码时仍然使用px为单位，最后全选代码，用快捷键 alt+z将px单位转换成rem单位即可。

该插件的基准值根据需要自行更改。更改方法参考：px to rem插件的使用_m0_46336652的博客-优快云博客