Vue CLI （三）：使用vw适配移动端

使用postcss插件转换px为vw

安装

npm i -S postcss-px-to-viewport
# or
yarn add postcss-px-to-viewport
复制代码

配置

在postcss.config.js中配置

module.exports = {
  plugins: {
    "postcss-px-to-viewport": {
      // 基准 - 视窗宽度
      viewportWidth: 750,
      // 转换后单位所带的小数点位数
      unitPrecision: 5,
      // 转换后单位
      viewportUnit: "vw",
      // 转换后字体的单位
      fontViewportUnit: "vmin", // ???暂时无效
      // 忽略的样式名
      selectorBlackList: [".ignore", ".hairlines"],
      // 最小px
      minPixelValue: 1,
      // 是否转换媒体查询的px单位
      mediaQuery: false
    }
  }
}
复制代码

解决宽高比

安装

npm i -S postcss-aspect-ratio-mini
# or
yarn add postcss-aspect-ratio-mini
复制代码

加入通用样式

[aspectratio] {
  position: relative;
}
[aspectratio]::before {
  content: '';
  display: block;
  width: 1px;
  margin-left: -1px;
  height: 0;
}
[aspectratio-content] {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}
复制代码

使用

<div aspectratio w-188-246>
  <div aspectratio-content>content</div>
</div>
复制代码

[w-188-246] {
  aspect-ratio: '188:246';
}
复制代码

解决1px

安装

npm i -S postcss-write-svg
# or
yarn add postcss-write-svg
复制代码

加入通用样式

@svg 1px-border {
  height: 2px;
  @rect {
    fill: var(--color, black);
    width: 100%;
    height: 50%;
  }
}
复制代码

使用

.example {
  border: 1px solid red;
  border-image: svg(1px-border param(--color #00b1ff)) 2 2 stretch;
}
复制代码