使用vw進行移動端適配（nuxt項目）

基於nuxt 2.0.0

一、安裝postcss-px-to-viewport

npm安裝

npm install postcss-px-to-viewport --save-dev

或 yarn安裝

yarn add -D postcss-px-to-viewport

 

二、在nuxt中配置postcss-px-to-viewport

在nuxt.config.js中配置

export default {
    ...
    ...
    ...

  /*
  ** Build configuration
  */
  build: {
    /*
    ** You can extend webpack config here
    */
    postcss: {
      // 添加插件名稱作為鍵，參數作為值
      plugins: {
        "postcss-px-to-viewport": {
          unitToConvert: "px", // 默認值`px`，需要轉換的單位
          viewportWidth: 375, // 視窗的寬度,對應設計稿寬度
          viewportHeight: 667, // 視窗的高度, 根據375設備的寬度來指定，一般是667，也可不配置
          unitPrecision: 3, // 指定`px`轉換為視窗單位值的小數位數
          propList: ["*"], // 轉化為vw的屬性列表
          viewportUnit: "vw", // 指定需要轉換成視窗單位
          fontViewportUnit: "vw", // 字體使用的視窗單位
          selectorBlaskList: [".ignore-"], // 指定不需要轉換為視窗單位的類
          mediaQuery: false, // 允許在媒體查詢中轉換`px`
          minPixelValue: 1, // 小於或等於`1px`時不轉換為視窗單位
          replace: true, // 是否直接更換屬性值而不添加備用屬性
          exclude: [], // 忽略某些文件夾下的文件或特定文件
          landscape: false, // 是否添加根據landscapeWidth生成的媒體查詢條件 @media (orientation: landscape)
          landscapeUnit: "vw", // 橫屏時使用的單位
          landscapeWidth: 1134 // 橫屏時使用的視窗寬度
        }
      },
      preset: {
        // 更改postcss-preset-env 設置
        autoprefixer: {}
      }
    }
  }
}

 

這樣基本的配置就可以了。

其他適配問題可以參考下面的文章👇

參考：

nuxt中如何添加postcss插件：https://zh.nuxtjs.org/faq/postcss-plugins/#%E5%A6%82%E4%BD%95%E6%B7%BB%E5%8A%A0-postcss-%E6%8F%92%E4%BB%B6-

postcss-px-to-viewport： https://github.com/evrone/postcss-px-to-viewport

再聊移動端頁面的適配（收費）：https://www.w3cplus.com/css/vw-for-layout.html

再聊移動端頁面的適配（轉載）：https://blog.csdn.net/qq_21729177/article/details/79466951

 

End--------------

全面復工啦~