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即可