vue 项目使用rem

安装flexible

第一种方法（js引入）

flexible.js的下载

github下载地址：https://github.com/amfe/lib-flexible

第二种方法

a. 安装lib-flexible

npm i lib-flexible --save

b. 在项目入口文件main.js里引入lib-flexible

import 'lib-flexible/flexible.js'

c.在项目根目录的index.html 头部删除自动生成的meta标签, lib-flexible会根据屏幕自动生成相对于的meta标签

// 删除

<meta name="viewport" content="width=device-width, initial-scale=1.0">

d. vscode安装插件cssrem

第三种方法

a. 安装 flexible和 postcss-px2rem(npm安装方式 flexible适用于移动端自适用)

npm install lib-flexible --save
npm i postcss-px2rem --sav

b.在项目根目录的index.html 头部删除自动生成的meta标签, lib-flexible会根据屏幕自动生成相对于的meta标签

<meta name="viewport" content="width=device-width,initial-scale=1.0">

c.引入lib-flexible

在项目入口文件main.js 中引入lib-flexible

import 'lib-flexible/flexible.js'

d.配置postcss-px2rem

px2rem的配置放在vue-cli3 项目中vue.config.js中（如果找不到此文件,可能你是一个新构建的项目，需要手动在项目根目录创建vue.config.js）

module.exports = {
    css: {
        loaderOptions: {
          css: {},
          postcss: {
            plugins: [
              require('postcss-px2rem')({
                remUnit: 37.5 //remUnit: 80意思为1rem=80px
              })
            ]
          }
        }
    },
}

e.使用方法及我遇到的几个坑

1.按照px来编写都会转化成rem的形式，但是有些地方我们不想转换，可以用下面两种方法。

在px后面添加/*no*/，不会转化px，会原样输出。 — 一般border需用这个

在px后面添加/*px*/,会根据dpr的不同，生成三套代码。---- 一般字体需用这个

2.使用过程中，发现某些import外联样式不会被转化，注意避开这些坑。

<style src='../assets/style.css'>
 /* px2rem能正常转换 */
</style>
<style>
  /* px2rem不能正常转换 */
  @import '../assets/style.css';
</style>
<style>
  /* px2rem不能正常转换 */
  @import url('../assets/style.css');
</style>