Question

我遇到了max-width媒体查询的问题。在这个，如果我使用该媒体查询：

@media only screen and (min-width: 320px) and (max-width: 480px) {
}

然后它不适用于480px分辨率。但如果我使用那个媒体查询：

@media only screen and (min-width: 320px) and (max-width: 640px) {
}

它的工作分辨率为480px但不适用于640px。它适用于Chrome。

我也在下面看到这个链接。但不成功。

Media queries not work in firefox

mediaqueries max-width not working in firefox

Media queries not working on firefox

我的元标记是：

<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />

请帮忙。

Answer 1

使用

@media only screen and (min-width: 320px) and (max-width: 480px) {

}

表示当屏幕宽度达到480px时会发生更改，并在屏幕宽度达到320px时恢复正常

不知道你想要什么，但上面的解释应该可以帮助你

Answer 2

它应该可以在任何浏览器中完美运行。

<!DOCTYPE html>
<html>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, minimum-scale=1.0' name='viewport' />
    <body>
      <div class="change">Some content</div>
    </body>
</html>

.change{
  background: #f00;
  align-items: center;
  font-family: sans-serif;
  color: #fff;
  height: 100px;
  display: flex;
  justify-content: center;
}
@media only screen and (min-width: 320px) and (max-width: 640px) {
  .change{
    background: #0f0;
    color: #00f;
  }
}

这是一个JS小提琴示例，更改媒体查询中的宽度，它应该仍然有用。

https://jsfiddle.net/rachit5/xm2tnx53/

请注意，当输出在iFrame中呈现时，媒体会进行查询将查找iFrame的宽度而不是原始页面。

媒体查询（max-width）在firefox中无法正常工作

2 个答案: