vue项目自适应布局

在Vue项目中实现自适应布局有多种方案。其中一种常用的方案是使用postcss-px-to-viewport插件。该插件可以将以像素为单位的样式属性转化为相应的视窗单位，从而实现自适应效果。

首先，你需要在项目的开发环境中安装postcss-px-to-viewport插件。可以使用npm命令进行安装：npm i postcss-px-to-viewport -D。

然后，在项目根目录下创建一个.postcssrc.js文件，并添加以下配置：

module.exports = {
  plugins: {
    autoprefixer: {},
    "postcss-px-to-viewport": {
      unitToConvert: "px",
      viewportWidth: 750,
      unitPrecision: 6,
      propList: ["*"],
      viewportUnit: "vw",
      fontViewportUnit: "vw",
      selectorBlackList: [],
      minPixelValue: 1,
      mediaQuery: true,
      exclude: [],
      landscape: false
    }
  }
};

这个配置文件指定了要转换的单位为像素(px)，UI设计稿的宽度为750，转换后的精度为6位小数，将转换所有css属性的单位为vw，字体也使用vw作为单位，不排除任何类名，设置最小像素值为1，在媒体查询中也进行转换，不进行直接替换属性值，不排除任何文件夹，不处理横屏情况。

安装完成并配置好后，插件将会在代码编译时自动将样式属性进行转换，实现自适应布局效果。

需要注意的是，如果你在vant项目中使用这个插件，可能会改变vant的样式。为了解决这个问题，有两种解决方式。一种是将设计稿大小改为375，因为vant是以375为参考的。另一种是在配置文件中添加以下内容：

module.exports = {
  plugins: {
    autoprefixer: {},
    "postcss-px2rem-exclude": {
      remUnit: 75,
      exclude: /node_modules/i,
      selectorBlackList: ["van-"]
    }
  }
};

以上配置中，remUnit设定为75，排除了node_modules文件夹下的样式文件，同时排除了以"van-"开头的类名，这样就可以避免vant框架相关组件或某些样式受到rem的影响。

使用postcss-px-to-viewport插件可以方便地实现在Vue项目中的自适应布局。根据你的具体需求和项目情况，选择合适的配置方式来达到自适应效果。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* [vue自适应布局3种方法](https://blog.csdn.net/qq_28512043/article/details/107949915)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *3* [vue自适应布局](https://blog.csdn.net/weixin_46396187/article/details/108060145)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]