媒体查询背后是什么？为什么媒体查询(宽度)比Javascript调整大小事件更好？

Question

我读过一篇文章说Javascript事件‘调整大小’会激发每个像素，并且具有宽度的媒体查询会更好，但是我没有发现任何关于媒体查询背后的内容。我看不出这是怎么可能的，因为没有每一个像素都有媒体查询操作，甚至浏览器也需要知道每个像素大小的变化。那么，为什么媒体查询应该比Javascript调整大小事件更好(至少对于宽度的改变是这样)？

对不起，如果我的英语有任何错误，那不是我的母语。

Answer 1

实际上，javascript调整大小事件您必须关注很多事情，例如: clientWidth、clientHeight、innerWidth、innerHeight、outerWidth、outerHeight、offsetWidth和/或offsetHeight属性。

对于媒体查询，当某些条件为真时，它也适用，不仅如此，它还有更多的好处，你可以在这里找到。

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

而且，它们完全不同，调整大小是在调整视口大小时发生的DOM事件。在媒体查询中，有更多的属性，比那些连接到视口大小的属性多。您可以通过媒体控制布局，导入样式规则等。

CSS的加载速度比Javascript快。当html呈现时，javascript将起作用。如果在呈现html或特定html标记之前加载javascript，它将无法工作。因此，媒体查询是更好的选择。是时候改变您使用调整大小函数的高级方式了。：:)

编辑过的

在这里，我可以想到三个重要的问题：

JavaScript support --如果客户端在浏览器中禁用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动画。