【前端开发】项目中如何兼容大屏小屏各种分辨率（可视化），Vue2

背景 因项目需要给不同人群使用，客户方使用笔记本（1366分辨率），有使用1k分辨率显示器，同时有部分用户使用2k显示器。（苹果笔记本2k分辨率且进行了缩放）
1.安装 postcss-px-to-viewport插件

npm install postcss-px-to-viewport --save-dev

2.根目录下新建postcss.config.js

    module.exports = {
      plugins: {
        "postcss-px-to-viewport": {
          unitToConvert: "px", // 需要转换的单位，默认为"px"
          viewportWidth: 1920, //  设计稿的视口宽度
          unitPrecision: 5, // 单位转换后保留的精度
          propList: ["*"], // 能转化为vw的属性列表
          viewportUnit: "rem", //  希望使用的视口单位
          fontViewportUnit: "rem", // 字体使用的视口单位
          selectorBlackList: [".el-scrollbar__view"], // 需要忽略的CSS选择器 '.el','el'
          minPixelValue: 1, // 最小的转换数值，如果为1的话，只有大于1的值会被转换
          mediaQuery: false, // 媒体查询里的单位是否需要转换单位
          replace: true, // 是否直接更换属性值，而不添加备用属性
          exclude: [/node_modules/, /\/pages\/mobile\//], // 忽略某些文件夹下的文件或特定文件
          include: undefined, // 如果设置了include，那将只有匹配到的文件才会被转换，例如只转换 'src/mobile' 下的文件 (include: /\/src\/mobile\//)
          landscape: false, 
          landscapeUnit: "vw" // 横屏时使用的单位
        }
      }
    };

如项目需要等比例放大，兼容4k或者物理屏幕较大，viewportUnit可设置为vw（视口宽度），开发时正常根据1920设计稿开发，此插件会自动转换单位为vw，页面等比例放大缩小。移动端同理，把1920改为750即可。
如项目不需要等比例放大，比如正常1920设计稿的页面经过vw转化后在2k显示器下字体会变大，插件官方未支持限制最大尺寸。且未支持行内样式和js写入样式的转化 ，所以需要把单位换为rem。可以看到上图代码单位即为rem
3.设置rem后同时要进行动态设置根元素的font-size，（rem单位基于html标签font-size进行换算）

// 新建rem.js
function setRem() {
  const screenWidth = window.screen.width;
  if (screenWidth >= 1920) {
    document.documentElement.style.fontSize = "19px";
  } else {
    document.documentElement.style.fontSize = "14px";
  }
}
//此处尺寸可以在安装插件后不同分辨率下手动更改html的font-size，调试好效果后在写到代码中
setRem();
window.onresize = function() {
  setRem();
};
// main.js引入
import "@/utils/rem.js";

4.上述方案都完成后看下各页面的效果，可能会引起部分样式效果不完美，借助媒体查询进行微调

@media screen and (min-width:2000px) and (max-width:2600px) {
    分辨率大于2000 小于2600
}  
@media screen and (min-width:1600px) and (max-width:2000px) {
    分辨率大于1600 小于2000
}
@media screen and (min-width:1200px) and (max-width:1600px) {
    分辨率大于1200 小于1600
}

5.特殊情况：如需要根据js动态修改尺寸，可写css变量，通过js更改。此处用scss举例
全局scss文件中生命变量

$buttonHeight: var(--buttonHeight);
 .el-button {
      height: $buttonHeight;
      line-height: 0px;
 }

在main.js入口文件根据条件动态初始化button样式

const sizeMap = {
  default: "",
  medium: "",
  small: "32px",
  mini: ""
};
document.getElementsByTagName("body")[0].style.setProperty("--buttonHeight", sizeMap[size]);
此处仅举例，具体样式逻辑根据项目需求来

项目代码：由于postcss-px-to-viewport不支持行内样式和js写入样式的转化。做出如下兼容，el-button不同尺寸下均能对齐el-form-item

// 修复按钮高度不同尺寸显示对齐
import Cookies from "js-cookie";
export const setButtonHeight = () => {
  const size = Cookies.get("size") || "small";
  const screenWidth = window.screen.width;
  let sizeMap = {};
  if (screenWidth > 1920) {
    sizeMap = {
      default: "40px",
      medium: "36px",
      small: "32px",
      mini: "28px"
    };
  } else if (screenWidth >= 1366 && screenWidth <= 1920) {
    sizeMap = {
      default: "30px",
      medium: "27px",
      small: "23.33px",
      mini: "21px"
    };
  }
  document.getElementsByTagName("body")[0].style.setProperty("--buttonHeight", sizeMap[size]);
};