nuxt中使用lib-flexible和postcss-px2rem

环境

 "nuxt": "^2.15.7",
 "postcss-px2rem": "^0.3.0",

准备工作

一、安装

npm install lib-flexible -s
npm install postcss-px2rem -s -d

一、引入和配置插件

在plugins文件夹中创建lib-flexble.js 文件

import 'lib-flexible'

//nuxt.config.js
export default {
  plugins: [
    { src: '~/plugins/lib-flexble.js', ssr: false },//lib-flexiblewen插件中有win对象所以这里选择false
  ],
  postcss: {
    plugins: [
      require('postcss-px2rem')({
        remUnit: 37.5  //设计稿宽度/100
      })
    ]
  },
}

这样就可以实现响应式设计啦~

Tips

使用这个方案时遇到个问题：首次打开屏幕闪烁，解决办法也很简单 需要轻微改造
1. 全局css中 HTML{ visibility:hidden}
2. 不要安装，直接把lib-flexible.js拷贝到plugins文件夹中的lib-flexble.js文件里
3.在lib-flexble.js中找到以下地方添加一段代码： visibility:visible;