大屏适配方案（px2rem，强制分辨率，百分比布局）

大屏适配解决方案

1. rem开发

方案1：整体适配
使用px2rem，自动实现px对rem的转换
npm install px2rem-loader --save-dev
在vue2下新增一个配置文件postcss.config.js

const autoprefixer = require("autoprefixer");
const pxtorem = require("postcss-pxtorem");
module.exports = () => ({
  plugins: [
    autoprefixer(),
    pxtorem({
      rootValue: 192.0,
      propList: ["*"],
      mediaQuery: false,
      unitPrecision: 3
    })
    // // autoprefixer 自动补齐 CSS3 前缀，适配不同浏览器
    // require('autoprefixer')({
    //   overrideBrowserslist: [
    //     "last 10 versions", // 所有主流浏览器最近10版本用
    //   ],
    // }),
    // require('postcss-pxtorem')({
    //   rootValue: 192.0, //设计稿元素尺寸/10，这里设计稿宽度为1920
    //   propList: ["*"], //是一个存储哪些将被转换的属性列表，这里设置为['*']全部，假设需要仅对边框进行设置，可以写['*', '!border*']
    //   unitPrecision: 3, //保留rem小数点多少位
    //   selectorBlackList: ['el-input', 'el-step', 'no-'],//则是一个对css选择器进行过滤的数组，比如你设置为['el-']，那所有el-类名里面有关px的样式将不被转换，这里也支持正则写法。
    //   replace: true,
    //   mediaQuery: false, //媒体查询( @media screen 之类的)中不生效
    //   // minPixelValue: 3, //px小于3的不会被转换
    // })
  ]
});、

rem开发 单页适配（门户首页，单个大屏，动态控制fontsize）

• 我自己经常用这个方案，这段代码可以写在app.vue里面，这种基本上也就是低配版的px2rem，能保证页面的绝对不缩放

//首先设置单页的fontsize大小，根据1920适配
document.documentElement.style.fontSize = document.documentElement.clientWidth / 1920 + 'px';
//然后把css文件中相关与px的内容全部改为rem就可以了
//这个方法可以解决背景图会自动拉伸的情况可以写算法动态写死背景图的宽高

2. 强制分辨率缩放（Bom始终保持一个分辨率,使用控制transform）

控制浏览器的显示，一直保持着1k，2k，4k的屏幕大小，问题是对于每个不同的分辨率都需要开发一套样式文件
控制屏幕的缩放比，当bom层面的分辨率发生变化transform：scale也跟着变化

//vue2.x
  mounted() {
    let _this = this;
    _this.setRem();
    window.onresize = function() {
      _this.setRem();
    };
  },
  methods: {
    setRem() {
      // if (!window.frameElement) {
      // 当前页面屏幕分辨率相对于 1920宽的缩放比例，可根据自己需要修改
      let w = document.documentElement.clientWidth,
        h = document.documentElement.clientHeight;
      const scale = w / h > 1920 / 1080 ? h / 1080 : w / 1920;
      document.querySelector("#mapbox").style.transform = `scale(${scale})`; 控制屏幕的缩放比
      document.querySelector("#mapbox").style[
        "transform-origin"
      ] = `center center`;
      // } else {
      //   $("#app").addClass("iframBox");
      // }
    },
  }
  //注意 上面代码是只控制倒了1k的分辨率下，如果需要适配其他的分辨率就需要判断其他的宽度
   let w = document.documentElement.clientWidth,
        h = document.documentElement.clientHeight,
   if (nameList.includes(name) && w > 6000) {
        scale = w / h > 6880 / 2000 ? h / 2000 : w / 6880;
      } else if (nameList.includes(name) && w > 3800) {
        scale = w / h > 3840 / 1290 ? h / 1290 : w / 3840;
      } else {
        scale = w / h > 1920 / 1080 ? h / 1080 : w / 1920;
      }
  //整个页面需要限制宽和高
  width: 1920px;
  height: 1080px;

3. 百分比布局

用的很少，平时只是控制单页的适配问题，整体百分比布局的话缩小页面的百分比可能会出问题

手机端适配方法