环境

    win10
    vue2.0
    vscode

一、rem转换公式

元素rem = 元素px/(设计稿的宽度/划分的份数)=元素px/html的font-size大小；
二、适配原理

将屏幕划分10等份（所以公式中的划分份数就是10），通过设置html根元素的字体大小对页面进行等比缩放；
三、适配步骤

    安装：下载解压flexible压缩包；
    配置：

    在vue项目的src目录下新建js文件夹，将lib-flexible-2.0文件夹下的index.js复制粘贴进去；
    在vue的src目录下的main.js中引入index.js

    修改body样式：在css文件夹下建立全局样式global.css，填入：

    安装px–>rem插件：

    第一款 px to rem：安装配置后选中带有px单位的数值是用Alt+z快捷键一键转换px单位为rem单位
    在这里插入图片描述
    在这里插入图片描述

    第二款 cssrem：边写代码便转换单位，安装后需要重启vscode
    在这里插入图片描述

至此，就可以实现rem适配了。页面会随着屏幕的大小等比缩放
————————————————
版权声明：本文为CSDN博主「Krlin_」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_46353030/article/details/121876162