vue项目做PC端页面采用rem适配的使用步骤

环境

• win10
• vue2.0
• vscode

一、rem转换公式

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

二、适配原理

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

三、适配步骤

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

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

import "./js/index.js"

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

body {
    
    
  width:192rem;//设计稿的宽度px-->rem
  max-width:1920px;//屏幕最大尺寸：设计稿的宽度
  min-width:320px;//屏幕最小尺寸
  margin:0 auto;
  line-height:1.5;
  background-color: rgb(32, 33, 54);
}

4. 安装px–>rem插件：

• 第一款 px to rem：安装配置后选中带有px单位的数值是用Alt+z快捷键一键转换px单位为rem单位
  
  

• 第二款 cssrem：边写代码便转换单位，安装后需要重启vscode
  

至此，就可以实现rem适配了。页面会随着屏幕的大小等比缩放

公式计算详解：b站pink老师的课程第453集“rem最终适配方案”