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;
}
複製代碼