vue react 移动 pc端适配

React VUE PC端和移动端适配

**

踩坑！！！！！！ 两种方法行内样式都不生效~

方法一 （rem）
使用lib-flexible和postcss-px2rem-exclude插件

npm install lib-flexible --save
npm  install postcss-px2rem-exclude --save 

下载完后 找到node-modules中lib-flexible文件下的flexible.js打开 修改下面代码即可

function refreshRem(){
        var width = docEl.getBoundingClientRect().width;
        if (width / dpr > 540) {
            // width = 540 * dpr; //移动端限制了宽度 所以修改宽度不固定
            width = width * dpr;
        }
        var rem = width / 10;
        docEl.style.fontSize = rem + 'px';
        flexible.rem = win.rem = rem;
    }

然后在main.js中引入

import 'lib-flexible'

如果当前项目没有postcss.config.js文件 则新建 并添加下面代码

module.exports = {
  plugins: {
    'postcss-px2rem-exclude': {
      remUnit: 192,//PC端 宽度 / 10即可 移动端 750 / 10 , 75 / 2 =37.5
      exclude: /node_modules|folder_name/i, //忽略第三方插件
    },
  },
}

最后一步注意在html根元素设置font-size