用rem怎么解决【移动端或pc端适配】问题？

一、原生html5页面，采用以下方法即可

创建flexible.js，复制以下代码，或官网直接下载，在vue中，可以

npm install --save flexible

(function flexible(window, document) {
  var docEl = document.documentElement;
  var dpr = window.devicePixelRatio || 1;

  // adjust body font size
  function setBodyFontSize() {
    if (document.body) {
      document.body.style.fontSize = 12 * dpr + "px";
    } else {
      document.addEventListener("DOMContentLoaded", setBodyFontSize);
    }
  }
  setBodyFontSize();

  // set 1rem = viewWidth / 10
  function setRemUnit() {
    var rem = docEl.clientWidth / 24;
    docEl.style.fontSize = rem + "px";
  }

  setRemUnit();

  // reset rem unit on page resize
  window.addEventListener("resize", setRemUnit);
  window.addEventListener("pageshow", function(e) {
    if (e.persisted) {
      setRemUnit();
    }
  });

  // detect 0.5px supports
  if (dpr >= 2) {
    var fakeBody = document.createElement("body");
    var testElement = document.createElement("div");
    testElement.style.border = ".5px solid transparent";
    fakeBody.appendChild(testElement);
    docEl.appendChild(fakeBody);
    if (testElement.offsetHeight === 1) {
      docEl.classList.add("hairlines");
    }
    docEl.removeChild(fakeBody);
  }
})(window, document);

使用 vscode 安装插件 px to rem 插件

将扩展设置中，设置Cssrem相应的font-size值，以pc端为例，如设计图为1920*1080，就用宽1920/24，就是font-size值，当然，如果是移动端设计图width为375时，就用375/24即可。

最后，在css编译时，就可以获取已转换的rem值

二、在vue框架中，采用以下方法

安装lib-flexible

npm install --save lib-flexible

在入口文件 main.js 中引入 lib-flexible

import 'lib-flexible/flexible'

在 build/utils.js 文件中配置 px2rem-loader

const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 192
    }
}

 其中有个坑需要注意（设计图的高会按照宽（1920px）的比例转换）

解决方法：

vue 安装 lib-flexible 插件时，默认的尺寸宽是 750px

此处需要尺寸宽1920px，所以需要将 node_modules 下的 lib-flexible文件夹下 flexible.js 中的 refreshRem() 函数中 540修改为  设计图尺寸宽即可 ，如：设计图是 1920*1080 

    function refreshRem(){
        var width = docEl.getBoundingClientRect().width;
        if (width / dpr > 1920) {
            width = 1920 * dpr;
        }
        var rem = width / 10;
        docEl.style.fontSize = rem + 'px';
        flexible.rem = win.rem = rem;
    }

编写css样式时直接用px单位，页面渲染时会自动转为rem单位大小尺寸

 

       希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~