Safari:媒体查询未按预期宽度触发

Question

我写过这样的CSS媒体查询 -

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

这适用于除Safari 10.0.4及更低版本之外的所有浏览器.Safari似乎以不同方式处理媒体查询.

其他浏览器似乎将window.innerWidth作为用于触发媒体查询的视口宽度,但safari似乎将document.documentElement.clientWidth作为视口宽度并相应地触发媒体查询.

我可以看到实际断点和预期断点之间的差异为15px.我正在寻找一种跨浏览器的方式来处理这个问题.欢迎提出意见,提前谢谢.

Answer 1

该窗口宽度VS实际宽度实际上是一个超级有趣的话题。Snuggug 对此有非常详尽的解释，但简而言之，它基于滚动条在不同浏览器中的放置方式。

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

一个潜在的问题是您将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;
  }
}

如果你宁愿不使用!important你的CSS代码，那么你就需要确保你看出来的下列两种情况：

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 选择器优先

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

WRONG 系列选择器：

.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;
  }
}

CORRECT 系列选择器：

.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;
  }
}

Answer 2

使用px（像素）而不是em。em 不是固定的，而是相对的。对于不同的浏览器有不同的解析。

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