大屏适配解决方案

大屏适配解决方案（解决不同分辨率下页面展示情况）

以vue 为例，使用rem 通过改变根字体大小，来统一变化页面距离

// 设置 rem 函数
function setRem() {
  //  PC端
  console.log("非移动设备");
  // 基准大小
  baseSize = 100;
  let basePc = baseSize / 1920; // 表示1920的设计图,使用100PX的默认值
  let vW = window.innerWidth; // 当前窗口的宽度
  let vH = window.innerHeight; // 当前窗口的高度
  // 非正常屏幕下的尺寸换算
  let dueH = (vW * 1080) / 1920;
  if (vH < dueH) {
    // 当前屏幕高度小于应有的屏幕高度，就需要根据当前屏幕高度重新计算屏幕宽度
    vW = (vH * 1920) / 1080;
  }
  let rem = vW * basePc; // 以默认比例值乘以当前窗口宽度,得到该宽度下的相应font-size值
  document.documentElement.style.fontSize = rem + "px";
}
// 初始化
setRem();
// 改变窗口大小时重新设置 rem
window.onresize = function() {
  console.log("我执行了");
  setRem();
};