vue移動端h5適配解決方案（rem or vw）

方案一：amfe-flexible+px2rem-loader

amfe-flexible：根據設備寬度，修改根元素html的大小，以適配不一樣終端
px2rem-loader：將css中的px轉爲rem單位，用了它就不用本身計算rem值了

注意：amfe-flexible是lib-flexible的優化，主要區別是amfe-flexible不會改變視口大小

安裝 + 配置

1. 安裝amfe-flexible和px2rem-loader

npm  install -s amfe-flexible
npm i px2rem-loader --save -dev
複製代碼

2. 配置amfe-flexible

// 入口文件main.js中引入
import 'amfe-flexible/index.js'
複製代碼

// 在index.html中修改meta
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
複製代碼

amfe-flexible幹了什麼呢？

• 給元素動態改寫font-size的值
• 設置1rem = viewWidth / 10
• 設置頁面刷新時重置rem
• 支持0.5px

3. 配置px2rem-loader

// build/utils.js
  const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 75 //默認換算爲1rem爲75px，可根據你的原型圖修改
    }
  }
// 在generateLoaders方法中添加px2remLoader
  function generateLoaders (loader, loaderOptions) {
    const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]
    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      })
    }
    // Extract CSS when that option is specified
    // (which is the case during production build)
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }
複製代碼

4. 展現效果

• iPhoneX（屏幕寬度爲375px）
  

  

• iPhone6/7/8 plus（屏幕寬度爲375px）
  

  

• iPad（屏幕寬度爲768px）
  

  

方案二：vw實現移動端適配

插件介紹

1. postcss-aspect-ratio-mini

主要用來處理元素容器寬高比。

若是咱們想要作一個188:246（188是容器寬度，246是容器高度）這樣的比例容器，只須要這樣使用：

[w-188-246] {
  aspect-ratio: '188:246';
}
複製代碼

有一點須要特別注意：aspect-ratio屬性不能和其餘屬性寫在一塊兒，不然編譯出來的屬性只會留下aspect-ratio的值。主要是由於在插件中作了相應的處理，不在每次調用aspect-ratio時，生成前面指定的默認樣式代碼，這樣代碼沒那麼冗餘。因此在使用的時候，須要分開來寫：

// 編譯前
[w-188-246] {
  width: 188px;
  background-color: red;
}
[w-188-246] {
  aspect-ratio: '188:246';
}
複製代碼

// 編譯後
[w-188-246] {
  width: 25.067vw;
  background-color: red;
}
[w-188-246]:before {
  padding-top: 130.85106382978725%;
}
複製代碼

2. postcss-px-to-viewport

postcss-px-to-viewport主要用來把px單位轉換爲vw、vh、vmin或者vmax這樣的視窗單位。

目前出視覺設計稿，咱們都是使用750px寬度的，那麼100vw = 750px，即1vw = 7.5px。在不想要把px轉換爲vw的時候，首先在對應的元素（html）中添加配置中指定的類名.ignore或.hairlines(.hairlines通常用於設置border-width:0.5px的元素中)

// 編譯前
.test {
  border: .5px solid black;
  border-bottom-width: 4px;
  font-size: 14px;
  line-height: 20px;
  position: relative;
}
[w-188-246] {
  width: 188px;
}
複製代碼

// 編譯後
.test {
  border: .5px solid #000;
  border-bottom-width: .533vw;
  font-size: 1.867vw;
  line-height: 2.667vw;
  position: relative;
}
[w-188-246] {
  width: 25.067vw;
}
複製代碼

3. postcss-write-svg

postcss-write-svg插件主要使用的是border-image和background來作1px的相關處理。

• border-image方式：

// 編譯前
@svg 1px-border {
  height: 2px;
  @rect {
    fill: var(--color, black);
    width: 100%;
    height: 50%;
  }
}
.example {
  border: 1px solid transparent;
  border-image: svg(1px-border param(--color #00b1ff)) 2 2 stretch;
}
複製代碼

// 編譯後
.example {
  border: 1px solid transparent;
  border-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='2px'%3E%3Crect fill='%2300b1ff' width='100%25' height='50%25'/%3E%3C/svg%3E") 2 2 stretch;
}
複製代碼

• background-image方式：

// 編譯前
@svg square {
  @rect {
    fill: var(--color, black);
    width: 100%;
    height: 100%;
  }
}

#example {
  background: white svg(square param(--color #00b1ff));
}
複製代碼

// 編譯後
#example {
  background: white url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect fill='%2300b1ff' width='100%25' height='100%25'/%3E%3C/svg%3E");
}
複製代碼

4. postcss-cssnext

主要用來讓咱們使用CSS將來的特性，其會對這些特性作相關的兼容性處理。

5. cssnano

cssnano主要用來壓縮和清理CSS代碼。在Webpack中，cssnano和css-loader捆綁在一塊兒，因此不須要本身加載它。不過你也可使用postcss-loader顯式的使用cssnano。

cssnano集成了一些其餘的PostCSS插件，若是你想禁用cssnano中的某個插件的時候，能夠像下面這樣操做：

"cssnano": {
  autoprefixer: false,
  "postcss-zindex": false
}
複製代碼

6. postcss-viewport-units

postcss-viewport-units插件主要是給CSS的屬性添加content的屬性，配合viewport-units-buggyfill庫給vw、vh、vmin和vmax作適配的操做。

安裝 + 配置

1. 安裝PostCSS插件

默認PostCSS插件（經過Vue-cli構建的項目默認安裝了）：

• postcss-import：主要用來處理@import引入路徑問題。
• postcss-url：主要用來處理文件，好比圖片文件、字體文件等引用路徑的處理。
• autoprefixer：主要用來處理瀏覽器前綴問題。

npm i postcss-import --S
npm i postcss-url --S   
npm i autoprefixer --S
複製代碼

其餘PostCSS插件：

• postcss-aspect-ratio-mini：主要用來處理元素容器寬高比。
• postcss-px-to-viewport：主要用來把px單位轉換爲vw、vh、vmin或者vmax這樣的視窗單位。
• postcss-write-svg：主要使用的是border-image和background來作1px的相關處理。
• postcss-cssnext：主要用來讓咱們使用CSS將來的特性，其會對這些特性作相關的兼容性處理。
• cssnano：主要用來壓縮和清理CSS代碼。
• postcss-viewport-units：主要用來給CSS的屬性添加content的屬性，配合viewport-units-buggyfill庫給vw、vh、vmin和vmax作適配的操做。

npm i postcss-aspect-ratio-mini --S
npm i postcss-px-to-viewport --S   
npm i postcss-write-svg --S   
npm i postcss-cssnext --S   
npm i postcss-viewport-units --S   
npm i cssnano --S
複製代碼

2. 配置PostCSS插件

// 根目錄下的.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": {
      "cssnano-preset-advanced": {
        zindex: false,
        autoprefixer: false
      },
    }
  }
}
複製代碼

// 在index.html中修改meta
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
複製代碼

什麼狀況下適合使用vw呢？

• 容器適配，可使用vw
• 文本的適配，可使用vw
• 大於1px的邊框、圓角、陰影均可以使用vw
• 內距和外距，可使用vw

3. 展現效果

• iPhoneX（屏幕寬度爲375px）
  

  

• iPhone6/7/8 plus（屏幕寬度爲375px）
  

  

• iPad（屏幕寬度爲768px）
  

  

方案三：rem + vw （結合方案一和方案二）

參考文檔

• 使用 Flexible 實現手淘 H5 頁面的終端適配
• 如何在Vue項目中使用vw實現移動端適配