Question

我期待当我的屏幕尺寸发生变化时，我的网络会发生变化，就像我在下面编码一样

@media (min-width: 1200px) {
  .container {
    max-width: 1170px;
  }
}

@media (min-width: 900px) {
  .container {
    max-width: 870px;
  }
}

@media (min-width: 600px) {
  .container {
    max-width: 570px;
  }
}

但它不起作用。我缩小了浏览器大小，仔细查看了屏幕尺寸随开发人员工具的变化。我认为当屏幕尺寸达到断点时，屏幕会根据媒体查询进行更新。

加载文档时只能运行一次。

我该怎么做才能做到这一点？我应该使用一些脚本吗？

Answer 1

问题在于规则。当浏览器达到1200px时，它符合所有3个规则。 http://jsfiddle.net/jonms83/5q6etqex/

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.container {background-color:black;}
@media all and (min-width: 1200px) {
  .container {
    max-width: 1170px;
  }
}
@media all and (max-width: 1199px) and (min-width: 601px){
  .container {
    max-width: 870px;
  }
}

@media all and (max-width: 600px) {
  .container {
    max-width: 570px;
  }
}
</style>
</head>

<body>
<div class="container">&nbsp;</div>
</body>
</html>

Answer 2

尝试在媒体规范中交换最大宽度的最小宽度：

@media (max-width: 1200px) {
  .container {
    max-width: 1170px;
  }
}

@media (max-width: 900px) {
  .container {
    max-width: 870px;
  }
}

@media (max-width: 600px) {
  .container {
    max-width: 570px;
  }
}

我做了一个js小提琴演示：http://jsfiddle.net/mnva4kg4/

我添加了一些背景颜色，以表明它确实根据媒体查询交换定义。当然，你必须调整显示区域的大小才能看到它。您的.container的HTML和其他样式会影响其在不同尺寸下的显示方式。

媒体查询实时更新屏幕

2 个答案: