nuxt移動端适配設定問題

第一種：手動設定

以設計稿是375為例。

1 在plugins檔案夾中建立一個fontsize.client.js檔案，計算根字型大小

document.documentElement.style.fontSize=document.documentElement.clientWidth/3.75+"px"

2在nuxt.config.js檔案中引入

plugins: [

    {

      // src: '@/plugins/lib-flexible.js',

      src: '@/plugins/fontsize.client.js',

      ssr:false

    },

]

3 安裝postcss-pxtorem，用于轉換px為rem

然後在nuxt.config.js檔案中設定build選項

build: {

    vendor: ["axios"],

    postcss: {

      plugins: {

        "postcss-pxtorem": {

          rootValue: 100,  //這裡是關鍵

          unitPrecision: 5,

          propList: ['*'],

          selectorBlackList: ['as-px'],

          replace: true,

          mediaQuery: false,

          minPixelValue: 3

        }

      }

    }

}

此時在頁面中設定的px就會自動被轉化為rem而且保持1:10的關系。

比如頁面中設定的240px，就會自動轉化為2.4rem

tip：

如果設計稿改成750.隻需要改變fontsize.client.js中3.75為7.5即可