电脑缩放、浏览器缩放和前端媒体查询

先了解几个基本概念

• 查看视口尺寸（内容区域）：使用 window.innerHeight 和 window.innerWidth 或者 document.documentElement.clientHeight 和 document.documentElement.clientWidth。
• 查看整体窗口尺寸（包括浏览器工具栏等）：使用 window.outerHeight 和 window.outerWidth。
• 查看屏幕尺寸（整个屏幕的分辨率）：使用 window.screen.height 和 window.screen.width。

电脑缩放、浏览器缩放对于媒体查询的影响

          当电脑缩放比发生变化时候，三者的尺寸都会发生变化，电脑缩放会把逻辑像素等比例放大，所以在屏幕硬件不能改变的情况下，屏幕的尺寸px变少了

        当浏览器窗口通过鼠标滚轮拖动改变大小的时候，视口尺寸和整体窗口尺寸会发生变化，屏幕尺寸不会变化，这个很好理解在浏览器应用内缩放，只会等比例缩放浏览器内的元素尺寸

        CSS3媒体查询技术监测的其实是视口尺寸或者窗口尺寸，只要是视口尺寸发生了变化就会触发，本质上是一种浏览器技术，所以无论是电脑缩放或者是浏览器缩放都会导致媒体查询触发

总结：无论是电脑缩放还是浏览器缩放都会将所对应范围内的逻辑像素等比例放大