媒体查询是CSS3中引入的一种CSS技术。
它使用@media规则，仅当>某个条件为真时才包含CSS属性块。
https://www.w3schools.com/css/css_rwd_mediaqueries.asp

如果我们谈论的是MediaQueryList事件和window.resize事件，它们会同时运行，除了第一次绘制：

void Document::LayoutViewportWasResized() {
  MediaQueryAffectingValueChanged(MediaValueChange::kSize);
  if (media_query_matcher_)
    media_query_matcher_->ViewportChanged();
  // We need to be careful not to trigger a resize event when setting the
  // initial layout size. It might seem like the correct check should be
  // (load_event_progress_ >= kLoadEventInProgress), but that doesn't actually
  // work because the initial value of load_event_progress_ is
  // kLoadEventCompleted. DidFirstLayout() is a reliable indicator that the load
  // event *actually* completed; but we also need to fire a resize event if the
  // window size changes during load event dispatch.
  if (View()->DidFirstLayout() ||
      load_event_progress_ == kLoadEventInProgress) {
    EnqueueResizeEvent();
    EnqueueVisualViewportResizeEvent();
    if (GetFrame()->IsMainFrame() && !Printing())
      probe::DidResizeMainFrame(GetFrame());
  }
  if (!HasViewportUnits())
    return;
  GetStyleResolver().SetResizedForViewportUnits();
  SetNeedsStyleRecalcForViewportUnits();
}

https://chromium.googlesource.com/chromium/src/+/a3beacbe1eaa89b5e1555fea8e017df4404d0904/third_party/blink/renderer/core/dom/document.cc#4581-4603
避免总是在调整大小时触发事件与有时可能有一些小的好处。
您可能希望限制事件重复触发的唯一示例是用户使用鼠标调整窗口大小。旋转的移动的/平板电脑配置可能仅击发一次。