笔记本默认缩放（Windows HD Color）125%/150%导致布局错乱

一：背景

很多14寸win10笔记本，出厂默认设置为150%的显示，但是项目开发初期都是按照100%的比例开发的，上线之后发现有些机构用户的首页显示布局都是乱的。

二：解决方案

一：在页面devicePixelRatio(设备像素比例)变化后，通过计算页面body标签zoom修改其大小，来抵消devicePixelRatio变化带来的变化。

Window.devicePixelRatio

返回当前显示设备的物理像素分辨率与css像素分辨率之比。一个 CSS 像素的大小与一个物理像素的大小。简单来说，它告诉浏览器应使用多少屏幕实际像素来绘制单个 CSS 像素。

两个方案：用DevicePixelRatio.js的方法，发现组件内还有一些样式无法解决。 然后就用rem的方法了

二：rem方案 安装了插件postcss。配置好 html里面写了一个setRem()函数

function setRem() {
    const defalutWidth = 1440; // 默认宽度
    const defalutScale = 1; // 默认比例关系
    let defalutFontSize = 16; // 默认字体大小

    const getWidth = window.innerWidth; // 获取屏幕宽度
    let currentScale = getWidth/defalutWidth; // 计算当前的屏幕大小和默认宽度之间的比例

    // 防止缩放太小
    if(currentScale < 0.85 && getWidth > 1024){
        currentScale = 0.855;
    }
    // 当前为平板时
    if(getWidth <= 1024){
        defalutFontSize = defalutFontSize*2;
    }
    // 计算的宽度比例关系 再*默认字体大小，获取计算的字体大小
    const currentFontSize = (currentScale/defalutScale) * defalutFontSize;
    document.documentElement.style.fontSize = currentFontSize + 'px';
}

// 调用方法
setRem();

// 监听窗口在变化时重新设置根文件字体大小
window.onresize = function(){
    setRem();
}

参考网站：blog.csdn.net/weixin_4171… blog.csdn.net/qq_46123200…