Vue移动端适配

最新推荐文章于 2024-05-09 23:05:06 发布

Miku T_T

最新推荐文章于 2024-05-09 23:05:06 发布

阅读量1.5k

点赞数 2

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_40639292/article/details/123598410

版权

Vue 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

Vue移动端适配

使用插件

@vue-cli 4
amfe-flexible 2.2.1
postcss-pxtorem 5.1.1

安装

  npm install amfe-flexible@2.2.1 -S
  npm install postcss-pxtorem@5.1.1 -D

配置

在项目入口main.js中引入amfe-flexible

import 'amfe-flexible'

在项目根目录新建vue.config.js文件，添加配置

module.exports = {
  //...其他的配置
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require('postcss-pxtorem')({
            rootValue: 37.5, // 设置根字体大小，根据ui尺寸设置，375使用37.5
            propList: ['*'], // 属性的选择器，*表示通用
            selectorBlackList: ['xxx'] // 过滤xxx开头的类名，不进行rem转换
          }),
        ],
      },
    },
  },
};