项目做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