webpack4配置之——16：viewport适配移動端

移動端适配配置

這裡将之前的優化架構相關内容删除了，架構上的東西在看過我這之前的文章後，應該對

webpack

已經有了了解，那麼在這個基礎上，去看

vue-cli

或者

create-react-app

，看它們的

webpack

配置，起碼能知道該如何去修改了，在它們的基礎上，去搭配出适合自己項目的腳手架。

本文将主要記錄下我在使用

viewport

适配移動端時，學習的一些東西~

移動端首先最重要的是一個

meta

：

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
           

在所有要做的移動端頁面

head

裡，都需要加入該

meta

，然後是需要用到的插件：

npm install postcss-aspect-ratio-mini postcss-write-svg postcss-px-to-viewport -D
           

• postcss-aspect-ratio-mini

  ：主要用來處理固定寬高比；

• postcss-write-svg

  ：主要用來處理1像素邊框問題（該方法對圓角處理還未實作）；

• postcss-px-to-viewport

  ：将

  px

  機關自動轉換成

  viewport

  機關；

這是主要會用到的一些插件，當然還有其他的可能用到的，那些可以去看看前端大神大漠的文章。

插件下載下傳完成後，修改

postcss.config.js

檔案：

module.exports = {
  parser: 'postcss-scss',
  plugins: {
    'autoprefixer':{},
    "postcss-aspect-ratio-mini": {}, // 主要用來處理元素容器寬高比
    "postcss-write-svg": { utf8: false }, // 用來畫1像素線
    '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`
    }
  }
}
           

這裡做移動端是以

750

效果圖來做，在寫頁面樣式時，我們就可以直接寫

px

機關去做了，不用去做什麼複雜的運算，都交給插件處理了。

750

效果圖顯示多少像素，我們在寫樣式時就寫多少像素即可。

如果不是用來做移動端頁面，把這三個插件的配置注釋掉即可。