css - Safari:媒体查询未以预期宽度触发

Question

我写了一个 CSS 媒体查询像这样 -

@media screen and (max-width: 59.9375em) {
  .left {
   display: none;
  }
}

这在除 Safari 10.0.4 及以下版本之外的所有浏览器中都可以正常工作。Safari 似乎以不同的方式处理媒体查询。

其他浏览器似乎将 window.innerWidth 作为视口(viewport)宽度来触发媒体查询，但 safari 似乎将 document.documentElement.clientWidth 作为视口(viewport)宽度并相应地触发媒体查询。

我可以看到实际断点和预期断点之间存在 15 像素的差异。我正在寻找一种跨浏览器的方式来处理这个问题。欢迎提出想法，提前致谢。

Answer 1

窗口宽度 与实际宽度 实际上是一个非常有趣的话题。 Snuggug has a really extensive explanation for it ，但简而言之，它基于滚动条在不同浏览器中的放置方式。

有些浏览器会将滚动条覆盖在内容/网站的顶部。其他浏览器会缩短内容/站点的宽度，并在其旁边 处显示滚动条。这显然会在不同浏览器计算视口(viewport)宽度的方式上产生一些差异。

一个潜在的问题是您使用 em 作为度量单位。

请务必记住，em 是基于您当前字体大小的度量单位，因此可以接受浏览器解释。

根据您的font-family 和总体font-size，60em 通常在800px 左右。这意味着您的查询会更具体，如下所示:

@media screen and (max-width: 800px) {
  .left {
     display: none;
  }
}

如果您不确定样式是否被覆盖，您始终可以应用如下重要规则:

@media screen and (max-width: 800px) {
  .left {
     display: none !important;
  }
}

如果您希望不在您的 CSS 中使用 !important 标签，那么您需要确保注意以下两种情况:

---

CSS 从上到下读取

这意味着如果您为 .left 元素指定了规则，则需要将其放置在媒体查询之前而不是之后

错误的布局如下所示:

@media screen and (max-width: 800px) { //media query BEFORE rule
  .left {
     display: none;
  }
}

.left {
   .display:block;
}

正确的布局应该是这样的:

.left {
   .display:block;
}

@media screen and (max-width: 800px) { //media query AFTER rule
  .left {
     display: none;
  }
}

接下来要记住的是:

---

嵌套的 CSS 选择器优先

在媒体查询规则中使用相同数量(或更多)的父选择器。

错误的选择器系列:

.container .left { //2 selectors used in query
   .display:block;
}

@media screen and (max-width: 800px) {
  .left { //only 1 selector used in query therefore overwritten by the previous rule - this should have atleast 2 selectors to overwrite the previous rule
     display: none;
  }
}

正确的选择器系列:

.container .left { //2 selectors used in query
   .display:block;
}

@media screen and (max-width: 800px) {
  body .container .left { //3 selectors used in query
     display: none;
  }
}