浏览器缩放解决方案二，分辨率控制

由于通过zoom控制局限性太大，所以改用监听缩放比例的方案，配合rem技术，也可以实现对浏览器缩放的控制

关键代码

@media all and (-webkit-min-device-pixel-ratio: 1)  {
  html {
    font-size: 14px !important;
  }
}
@media all and (-webkit-min-device-pixel-ratio: 1.09) {
  html {
    font-size: 12.7px !important;
  }
}
@media all and (-webkit-min-device-pixel-ratio: 1.24) {
  html {
    font-size: 11.2px !important;
  }
}

由于是项目后期，所以还要配合postcss-px2rem插件，将px转换成rem

vue.config.js中配置postcss-px2rem

 

module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require('postcss-px2rem')({ remUnit: 16 }) // 换算的基数
        ]
      }
    }
  }
}

 

但只监听缩放，当分辨率变化时，样式还会变得无法控制，于是又监听分辨率又监听缩放，代码开始变得越来越复杂

后来发现，浏览器的放大，其实本质是分辨率的缩小，那么其他元素不变，才形成放大的效果，所以只需要监听分辨率，就可以实现对缩放效果的控制

找到常规的分辨率与缩放的组合

 

1920分辨率下
1745(110%)
1536(125%)
1280(150%)

 

1680分辨率下
1528(110%)
1344(125%)
1120(150%)

 

1440分辨率下
1310(110%)
1152(125%)
 960(150%)

只需要监听这些分辨率，即可实现对浏览器缩放的监听

去除相近的分辨率，还剩下

@media all and (max-width: 1920px) and (min-width: 1747px) {
  html {
    font-size: 16px !important;
  }
}
@media all and (max-width: 1747px) and (min-width: 1681px) {
  html {
    font-size: 14.5px !important;
  }
}
@media all and (max-width: 1681px) and (min-width: 1538px) {
  html {
    font-size: 14px !important;
  }
}
@media all and (max-width: 1537px) and (min-width: 1441px) {
  html {
    font-size: 12.8px !important;
  }
}
@media all and (max-width:1441px) and (min-width: 1346px) {
  html {
    font-size: 12px !important;
  }
}
@media all and (max-width: 1346px)  and (min-width: 1281px){
  html {
    font-size: 11.26px !important;
  }
}
@media all and (max-width: 1281px)  and (min-width: 1153px){
  html {
    font-size: 10.6px !important;
  }
}
@media all and (max-width: 1153px)  and (min-width: 961px){
  html {
    font-size: 9.6px !important;
  }
}
@media all and (max-width: 961px)  {
  html {
    font-size: 8px !important;
  }
}

　　

 

缺点

postcss-px2rem插件行内式样式无法转换，自己写的还好办，引入的插件则需要单独去设置

chrome字体默认最小为12px，所以fontsize小于12，字体文件不会跟着变小了

基于这两点，这种方法对缩放效果的控制会有很多差异，如果追求100%还原，不同页面要不断的调整