lib-flexible和postcss-px2rem PC端和移动端的适配 （PC端的设计稿1920，移动端的设计稿750）

之前ui 给pc端的设计稿是 1920* 1080 ，并没有提过要写移动端网站，所以之前一直做的是pc端。

1，安装 flexible和 postcss-px2rem（命令行安装）

npm install lib-flexible --save

npm install postcss-px2rem --save

vue.confit.js的文件中：

在node_modules 找到 lib-flexible文件下的flexible.js，然后找到refreshRem函数，将其改为：

那么pc端的适配就好了

后来又在这的基础上要加入移动端的适配，并且UI给的移动端设计图是750，额鹅鹅鹅，而pc端的是1920，在网上查了，好像没找到 怎么同事解决给1920的设计稿和750的设计稿，最终自己摸索了会，将lib-flexible文件下的flexible.js，然后找到refreshRem函数改为：

    function refreshRem(){

        console.log('将根据已有的meta标签来设置缩放比例',win)

        var width = docEl.getBoundingClientRect().width;

        if (width / dpr > 540) {

            width = width * dpr;

        }

        

        let flag = win.navigator.userAgent.match(

            /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i

        );

        if(flag === null) {

            console.log("pc端");

            var rem = width / 10;

           

        }else {

            console.log("移动端");

            var rem = (width / 10)*2.56;   // 移动端的2.56 是 我用  192 /75 = 2.56  然后移动端的尺寸就可以1:1 进行

            

        }

        docEl.style.fontSize = rem + 'px';

        flexible.rem = win.rem = rem;

    }

《----------------------------------------------------------》

然后 首页：

<template>

  <div class="home" ></