关于Nuxt2适配的好办法

一、rem单位

1.在vscoed中安装px to rem & rpx & vw (cssrem)插件

2.安装npm install -S amfe-flexible 

3.找到plugins目录下的main.js中引入import 'amfe-flexible/index.js'；

4.在node_modules/amfe-flexible/index.js将10修改为24，这个数字是用来将文档的宽度转化为rem单位的比例。一个rem单位通常代表根元素（通常是html元素）的字体大小。（根据个人需求是否做更改）

5.此时已经发现自己的有了根字号

6.在plugins文件下新建一个rem.js

!(function () {
    function setHtmlFontSize() {
      var whdef = 80 /1920 ; // 表示1920的设计图
      var bodyWidth = document.documentElement.getBoundingClientRect().width; // 当前窗口的宽度
      console.log(bodyWidth, '屏幕宽度');
      var rem = bodyWidth * whdef; // 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值
      document.getElementsByTagName('html')[0].style.fontSize = rem + 'px'
    }
    setHtmlFontSize();
    window.addEventListener("resize", function () {
    
      setTimeout(function () {
        setHtmlFontSize();
      }, 100)
    })
  })();

7.在nuxt.config.js文件的plugins下

 plugins: [
    {src: "~/plugins/rem.js", ssr: false } ,
  ],

测试成功

二、px自动转为rem

1.同样要安装amfe-flexible，第一个里面的2-5步骤，因为你将px转为rem之后，也是要根据不同的根字号去变的。

2.安装 npm install --save postcss-px2rem

（nuxt移动端自适应，刚进页面会变形，解决方法_nuxtjs 自适应-CSDN博客）参考文章。

3.在nuxt.config.js中需要将自定义的flexible.js引入

  head: {
    meta: [
    ... ...
    script: [
      {src:"js/flexible.js", type: 'text/javascript', charset: 'utf-8'}
    ],
  },

4.在nuxt.config.js中build下配置（1920/24=80）

  build: {
    //移动端适配

    "postcss":[
      require("postcss-px2rem")({
        remUnit: 80,
      }),
    ],
}

5.就OK啦