Vue開發中的移動端適配（px轉換成vw）

標籤：asc   總結   before   module   ann   app   export   單位   lis   

1.項目根目錄下，建立 .postcssrc.js 檔案。

2.安裝外掛程式。

-D （開發依賴）

postcss-import

postcss-url

cssnano-preset-advanced

-S （開發、運行都依賴）

postcss-aspect-ratio-mini

postcss-px-to-viewport
postcss-write-svg
postcss-cssnext
cssnano
postcss-viewport-units

 

3.配置  .postcssrc.js

module.exports = {  "plugins": {    "postcss-import": {},    "postcss-url": {},    "postcss-aspect-ratio-mini": {},       "postcss-write-svg": {        utf8: false      },      "postcss-cssnext": {},      "postcss-px-to-viewport": {        viewportWidth: 750,  //視窗的寬度，對應的是我們設計稿的寬度，一般是750        viewportHeight: 1334, // 視窗的高度，根據750裝置的寬度來指定，一般指定1334，也可以不配置        unitPrecision: 3,       // 指定`px`轉換為視窗單位值的小數位元（很多時候無法整除）        viewportUnit: ‘vw‘,     // 指定需要轉換成的視窗單位，建議使用vw        selectorBlackList: [‘.ignore‘, ‘.hairlines‘],  // 指定不轉換為視窗單位的類，可以自訂，可以無限添加,建議定義一至兩個通用的類名        minPixelValue: 1,       // 小於或等於`1px`不轉換為視窗單位，你也可以設定為你想要的值        mediaQuery: false       // 允許在媒體查詢中轉換`px`      },       "postcss-viewport-units":{},      "cssnano": {        preset: "advanced",        autoprefixer: false,        "postcss-zindex": false      },  }}

 

4. 根組件 App.vue 的style 中，加入以下樣式:( 統一的寬度比預設屬性 )

[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%;}/*vm相容處理使用Viewport Units Buggyfill造成的副作用，需要如下設定img*/img {  content: normal !important; }

比如：想要一個 750:250 的比例容器，html中的代碼：

<div class="banner" w-750-250 aspectratio aspect-ratio="750/250">      <div aspectratio-content>         <img src=""  width="100%" height="100%">      </div> </div> 

它對應的css樣式:

[w-750-250] {    width: 750px;}[w-750-250]{    aspect-ratio:‘750:250‘;}

 

5.vw的相容處理 （有些手機不支援vw單位 ）　　

　　5.1 Vue項目的index.html中引入如下JS 檔案：　

<script src="//g.alicdn.com/fdilab/lib3rd/viewport-units-buggyfill/0.6.2/??viewport-units-buggyfill.hacks.min.js,viewport-units-buggyfill.min.js"></script>

　　5.2 在html底部調用 viewport-units-buggyfill

<script>    window.onload = function () {      window.viewportUnitsBuggyfill.init({        hacks: window.viewportUnitsBuggyfillHacks      });</script>

 

6.自己沒用第5點的方式使用 viewport-units-buggyfill，而是使用了 npm 安裝的方式引入。

　　6.1 npm  install  viewport-units-buggyfill  -S

　　6.2 項目的入口檔案中（比如 main.js），引入：

var hacks = require(‘viewport-units-buggyfill.hacks‘);require(‘viewport-units-buggyfill‘).init({  hacks: hacks});

　　

註：詳細的配置說明，可以閱讀  https://www.w3cplus.com/mobile/vw-layout-in-vue.html   這一篇好文。

本文只是學習並實踐後的總結。外掛程式不是都必須安裝，可根據實際項目需要，自行決定。

 

Vue開發中的移動端適配（px轉換成vw）