Vue移动端适配

最新推荐文章于 2023-12-12 22:00:39 发布

Miku T_T

最新推荐文章于 2023-12-12 22:00:39 发布

阅读量1.5k

点赞数 2

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

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

版权

Vue 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了在Vue项目中实现移动端适配的步骤，包括使用@vue-cli4搭建环境，安装amfe-flexible和postcss-pxtorem插件，并在main.js中引入amfe-flexible，以及在vue.config.js中配置postcss-pxtorem，实现px到rem的自动转换，确保样式在不同屏幕尺寸下正确显示。

摘要由CSDN通过智能技术生成

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转换
          }),
        ],
      },
    },
  },
};