vue自适应布局postcss-px2rem详解

首先我们需要了解一下什么是自适应布局和px2rem。

自适应布局

自适应布局是指网页能够根据屏幕尺寸自动调整布局，从而实现在不同的终端设备上呈现出更好的用户体验。在传统的网页设计中，设计师通常会设置一个固定的像素值作为布局单位，但是这种布局难以适应不同屏幕尺寸的设备。因此，采用自适应布局的设计方法可以有效解决这个问题。

px2rem

px2rem是一种将像素值转化为rem值的工具。在使用rem单位布局时，可以让页面元素根据设备屏幕尺寸自动调整大小，从而实现自适应布局。px2rem的原理是基于根据设备屏幕宽度动态设置网页根元素font-size大小，使用rem进行布局计算，从而实现自适应布局的效果。

postcss-px2rem插件

postcss-px2rem是一个基于PostCSS的插件，可以将指定的css文件中的px单位转化为rem单位。在vue项目中使用postcss-px2rem进行自适应布局，只需要通过npm安装插件并配置即可。

以下是如何使用postcss-px2rem实现自适应布局的详细步骤：

1. 安装postcss-px2rem插件

在vue项目下执行以下命令：

npm install postcss-px2rem --save-dev

1. 添加postcss配置文件

在项目的根目录下新建.postcssrc.js文件，添加以下内容：

module.exports = {
  "plugins": {
    "postcss-px2rem": {
      "remUnit": 75  // 根据你的设计稿设置，一般设计稿宽度为750px
    }
  }
}

上述配置将750px设计稿下的1px转换成1/75=0.013333rem。

1. 在webpack配置文件中添加postcss配置

在build/webpack.base.conf.js配置文件中找到：

 module: {
    rules: [
      // ...
    ]
  }

在rules中添加：

{
    test: /\.css$/,
    use: [
        'vue-style-loader',
        'css-loader',
        {
            loader: 'postcss-loader',
            options: {
                sourceMap: false //关闭 CSS source maps
            }
        }
    ]
}

上述配置表示使用postcss-loader加载器加载.css文件，并开启postcss功能。

1. 在vue组件中使用

在vue组件中引入样式文件，例如：

<template>
    <div class="example">
        <p class="example-text">这是一段文字</p>
    </div>
</template>

<style lang="css">
.example {
  width: 600PX;
  height: 300px;
}

.example-text {
  font-size: 24px;
  line-height: 32px;
  padding: 20px;
  background-color: #f5f5f5;
}
</style>

在该示例中，我们将根据750设计稿进行rem之后得到的根元素font-size设置为100px，那么可以将600px设计稿下的1px转化为0.01rem，即下面的样式：

.example {
  width: 8rem;
  height: 4rem;
}

.example-text {
  font-size: 0.32rem;
  line-height: 0.4266rem;
  padding: 0.2666rem;
  background-color: #f5f5f5;
}

至此，我们实现了在vue项目中使用postcss-px2rem插件进行自适应布局的示例。

示例一

假设我们有一个按钮组件，它的默认宽度为300px，高度为40px，文字大小为14px，上下边距为10px，左右边距为20px。在750px设计稿下，我们将这个组件的样式设置为：

.button {
    width: 300px;
    height: 40px;
    font-size: 14px;
    margin: 10px 20px;
    background-color: red;
}

通过上述配置，我们可以计算出该组件的尺寸：

宽度: 300 / 750 * 100 = 40 rem

高度: 40 / 750 * 100 = 5.3333 rem

文字大小: 14 / 75=0.18666rem

上下边距: 10 / 750 * 100 = 1.3333 rem

左右边距: 20 / 750 * 100 = 2.6666 rem

因此，在.vue 文件中，应该这样写：

<template>
  <button class="button">按钮</button>
</template>

<style lang="css">
  .button {
    width: 40rem;
    height: 5.3333rem;
    font-size: 0.18666rem;
    margin: 1.3333rem 2.6666rem;
    background-color: red;
  }
</style>

示例二

假设我们有一个栅格布局，它包含了三列，每一列的宽度分别为: 160px, 280px 和 240px，每一列之间的间隔是20px。在750px设计稿下，我们将这个栅格布局的样式设置为：

.container {
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    margin: 20px 0;
}

.box {
    height: 200px;
    margin-right: 20px;
    font-size: 16px;
}

.box1 {
    width: 160px;
    background-color: red;
}

.box2 {
    width: 280px;
    background-color: blue;
}

.box3 {
    width: 240px;
    background-color: green;
}

通过上述配置，我们可以计算出box1、box2、box3的实际宽度分别为：

box1宽度: 160 / 750 * 100 = 21.3333 rem

box2宽度: 280 / 750 * 100 = 37.3333 rem

box3宽度: 240 / 750 * 100 = 32 rem

在.vue 文件中，应该这样写：

<template>
  <div class="container">
    <div class="box box1">box1</div>
    <div class="box box2">box2</div>
    <div class="box box3">box3</div>
  </div>
</template>

<style lang="css">
  .container {
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    margin: 2.6666rem 0;
  }

  .box {
    height: 4rem;
    margin-right: 2.6666rem;
    font-size: 0.2133rem;
  }

  .box1 {
    width: 21.3333rem;
    background-color: red;
  }

  .box2 {
    width: 37.3333rem;
    background-color: blue;
  }

  .box3 {
    width: 32rem;
    background-color: green;
  }
</style>

以上两个示例仅供参考，具体使用方法还需根据实际需求进行调整。