媒体查询的背后是什么？为什么媒体查询（带宽度）比 Javascript resize 事件更好？
What is behind media queries ? Why media queries (with width) are better than Javascript resize event?
我读过 post 说 Javascript 事件 'resize' 触发每个像素，并且有宽度的媒体查询更好，但我没有找到任何关于背后的东西媒体查询。而且我不明白这怎么可能，因为媒体查询没有每个像素的动作，甚至浏览器也需要知道他每个像素的大小变化。那么为什么媒体查询应该比 Javascript 调整大小事件（至少对于宽度的变化）更好？
PS : 对不起，如果我的英语有任何错误，那不是我的母语。
其实javascript resize事件你要关注很多东西比如：clientWidth, clientHeight, innerWidth, innerHeight, outerWidth, outerHeight, offsetWidth and/or offsetHeight properties.
对于媒体查询，它在特定条件为真时适用，不仅如此，它还有更多好处，您可以在此处找到。
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
它们也完全不同，调整大小是在调整视口大小时发生的 DOM 事件。在媒体查询中，有比与视口大小相关的属性更多的属性。您可以通过媒体控制布局，导入样式规则等
CSS 加载速度比 Javascript 快。javascript 将在呈现 html 时工作。如果加载 javascript 在呈现 html 或特定的 html 标记之前，它将不起作用。因此媒体查询是更好的选择。 P.S 是时候改变你使用调整大小功能的高级方式了。:)
已编辑
我可以想到三个重要的问题：
JavaScript 支持 - 如果客户端在其浏览器中禁用 JS，onresize 根本不会触发。现在禁用 JS 几乎不可能上网，但仍然是一个值得关注的问题。
Animations - 如果您打算制作从一种 window 尺寸到另一种尺寸的动画过渡，那么 CSS 动画是最佳选择，尤其是移动设备。 CSS 动画在可用时使用硬件加速，因此非常快速和高效，消耗更少 CPU 和 运行 更流畅。
您仍然可以使用 onresize 从 JS 触发 CSS 动画（添加一个 class，更改一个动画 CSS 属性），但请考虑 3.
DOM 遍历 - 要么是你的 JS 代码，要么是浏览器内部，为了操作 DOM 必须遍历它。
CSS 属性通过遍历 DOM 并根据 CSS 选择器匹配元素应用于 DOM 元素。浏览器供应商不断优化此过程并使其尽可能高效。当然，这也取决于你如何编写 CSS，但浏览器会在内部优化你的选择器一次并多次应用它们。
另一方面，JS 也必须遍历 DOM 才能进行任何操作。但是对于 JS，DOM 遍历（document.all、document.getElementById、document.querySelector 等）的效率取决于你。
我会尽可能使用媒体查询和 CSS 由媒体查询规则或其他 JS 事件触发的动画。
我读过 post 说 Javascript 事件 'resize' 触发每个像素，并且有宽度的媒体查询更好，但我没有找到任何关于背后的东西媒体查询。而且我不明白这怎么可能，因为媒体查询没有每个像素的动作，甚至浏览器也需要知道他每个像素的大小变化。那么为什么媒体查询应该比 Javascript 调整大小事件（至少对于宽度的变化）更好？
PS : 对不起，如果我的英语有任何错误，那不是我的母语。
其实javascript resize事件你要关注很多东西比如：clientWidth, clientHeight, innerWidth, innerHeight, outerWidth, outerHeight, offsetWidth and/or offsetHeight properties.
对于媒体查询，它在特定条件为真时适用，不仅如此，它还有更多好处，您可以在此处找到。
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
它们也完全不同，调整大小是在调整视口大小时发生的 DOM 事件。在媒体查询中，有比与视口大小相关的属性更多的属性。您可以通过媒体控制布局，导入样式规则等
CSS 加载速度比 Javascript 快。javascript 将在呈现 html 时工作。如果加载 javascript 在呈现 html 或特定的 html 标记之前，它将不起作用。因此媒体查询是更好的选择。 P.S 是时候改变你使用调整大小功能的高级方式了。:)
已编辑
我可以想到三个重要的问题：
JavaScript 支持 - 如果客户端在其浏览器中禁用 JS，onresize 根本不会触发。现在禁用 JS 几乎不可能上网，但仍然是一个值得关注的问题。
Animations - 如果您打算制作从一种 window 尺寸到另一种尺寸的动画过渡，那么 CSS 动画是最佳选择，尤其是移动设备。 CSS 动画在可用时使用硬件加速，因此非常快速和高效，消耗更少 CPU 和 运行 更流畅。 您仍然可以使用 onresize 从 JS 触发 CSS 动画（添加一个 class，更改一个动画 CSS 属性），但请考虑 3.
DOM 遍历 - 要么是你的 JS 代码，要么是浏览器内部，为了操作 DOM 必须遍历它。 CSS 属性通过遍历 DOM 并根据 CSS 选择器匹配元素应用于 DOM 元素。浏览器供应商不断优化此过程并使其尽可能高效。当然，这也取决于你如何编写 CSS，但浏览器会在内部优化你的选择器一次并多次应用它们。 另一方面，JS 也必须遍历 DOM 才能进行任何操作。但是对于 JS，DOM 遍历（document.all、document.getElementById、document.querySelector 等）的效率取决于你。 我会尽可能使用媒体查询和 CSS 由媒体查询规则或其他 JS 事件触发的动画。