CSS从上到下读取

Question

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

＆＃13;

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

＆＃13;

除Safari 10.0.4及更低版本外，所有浏览器均可正常使用。 Safari似乎以不同方式处理媒体查询。

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

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

Answer 1

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

某些浏览器会覆盖内容/网站顶部的滚动条。其他浏览器会缩短内容/网站的宽度，并使滚动条下一步。这显然会在不同浏览器计算视口宽度方面产生一些差异。

潜在的问题是您使用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; }

CORRECT布局如下所示：

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

Answer 3

试试这个css hack：

@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) { 
@media {
  .left { 
      display: none;
  }
}}

来源：https://jeffclayton.wordpress.com/2015/04/28/css-hacks-for-safari-6-1-7-and-8-not-chrome/

Answer 4

你应该阅读这两篇文章：

然后你会明白为什么你遇到了问题。

TLDR：em值基于根字体大小值，但在Safari与其他浏览器的情况下，em相对于初始值或根值（浏览器选择一个或另一个媒体查询，但不是两者，这可能导致跨浏览器的差异）

Answer 5

根据css规则

，你必须在.left类之后使用媒体查询

例如

.left {
  display:inline;
}

@media screen and (max-width: 59.9375em) {
  .left {
   display: none !important; //important will override all the .left class.
  }
}

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

5 个答案:

CSS从上到下读取

嵌套的CSS选择器优先于