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