PC端实现适配(flexible.js+postcss-px2rem)

1,194 阅读1分钟

vue-cli3 PC端实现适配(flexible.js+postcss-px2rem)

1、安装
	npm install postcss-px2rem
	npm install lib-flexible -S	
2、配置 
    	vue.config.js 添加配置
    	css: {
            loaderOptions: {
              css: {},
              postcss: {
                plugins: [
                  require('postcss-px2rem')({
                    remUnit: 192,  //根据视觉稿,rem为px的十分之一
                  })
                ]
              }
            }
          },
3、在main.js中引入文件
         import 'lib-flexible'
4、找到\node_modules\lib-flexible\flexible.js

5、修改成
       function refreshRem(){
        var width = docEl.getBoundingClientRect().width;
         if (width / dpr > 540) {
             width = width * dpr;
         }
         //缩放比例,可按实际情况修改
         var rem = width / 8;
         docEl.style.fontSize = rem + 'px';
         flexible.rem = win.rem = rem;
   	}	
6、样式不被转化,只需要在样式后面添加/no/换或者PX大写
    	border: 1px solid red;/*no*/