Css 通过媒体查询实时更新屏幕_Css_Responsive Design_Media Queries

Css 通过媒体查询实时更新屏幕

css responsive-design

Css 通过媒体查询实时更新屏幕,css,responsive-design,media-queries,Css,Responsive Design,Media Queries,我原以为我的网页会随着屏幕大小的改变而改变，就像我在下面编码的那样 @media (min-width: 1200px) { .container { max-width: 1170px; } } @media (min-width: 900px) { .container { max-width: 870px; } } @media (min-width: 600px) { .container { max-width: 570px; } }

我原以为我的网页会随着屏幕大小的改变而改变，就像我在下面编码的那样

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

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

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

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

加载文档时，它只工作一次

作为一个实时用户，我应该怎么做？我应该使用一些脚本吗？

尝试在介质规范中将最小宽度替换为最大宽度：

@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小提琴来演示：

我添加了一些背景色，以显示它确实在基于媒体查询交换定义。当然，您必须调整显示区域的大小才能看到它。容器的HTML和其他样式将影响它在不同大小时的外观。

问题在于规则。当浏览器达到1200px时，它符合所有3条规则。


无标题文件
.container{背景色：黑色；}
@介质和全部（最小宽度：1200px）{
.集装箱{
最大宽度：1170px；
}
}
@介质和全部（最大宽度：1199px）和（最小宽度：601px）{
.集装箱{
最大宽度：870像素；
}
}
@全部和全部介质（最大宽度：600px）{
.集装箱{
最大宽度：570px；
}
}

<!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>