在vue中如何配置px实现响应式布局

在Vue中，可以通过使用PostCSS插件autoprefixer来自动转换CSS中的px为rem或vw/vh单位，从而实现响应式布局。

首先，安装PostCSS和autoprefixer插件：

npm install postcss autoprefixer --save-dev

然后，在项目根目录下创建一个postcss.config.js文件，配置autoprefixer插件：

module.exports = {
  plugins: {
    autoprefixer: {}
  }
}

接着，在项目中使用px单位编写CSS样式，例如：

.container {
  width: 750px; /* 设计稿宽度为750px */
  margin: 0 auto;
}

最后，在Vue组件中引入CSS样式，并在style标签中添加postcss-loader：

<template>
  <div class="container">
    ...
  </div>
</template>

<style scoped lang="scss">
@import "./styles/main.scss";
</style>

<script>
export default {
  name: 'MyComponent',
  ...
}
</script>

在webpack配置文件中添加postcss-loader：

module.exports = {
  ...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'postcss-loader'
        ]
      },
      {
        test: /\.scss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'postcss-loader',
          'sass-loader'
        ]
      },
      ...
    ]
  },
  ...
}

这样就可以在Vue项目中使用px单位实现响应式布局了。当浏览器窗口大小改变时，CSS中的px单位会自动转换为rem或vw/vh单位，从而实现响应式布局。