Question

似乎CSS仅能识别第一个媒体查询。每当我更改屏幕尺寸以查看不同的更改时，它只会“落入”第一个媒体查询或常规CSS代码中。

我尝试将媒体查询移到工作查询的上方和下方，但它没有任何改变。在查询中，我将几种颜色更改为黑色，以便可以测试它们是否确实有效，但是它什么都没有改变。

这是我的媒体查询布局的示例。

*** REST OF CSS FILE UP HERE ***

@media screen and (max-width: 600px) {...}

@media screen and (max-width: 600px) {...}

@media only screen and (min-width: 600px) {}

@media only screen and (min-width: 768px) {}

@media only screen and (min-width: 992px) {}

@media only screen and (min-width: 1200px) {}

我有两个顶级媒体查询，因为其中一个用于普通导航栏，另一个用于响应式导航栏（单击按钮后）。

第一个媒体查询中的示例：

.welcome {
    background: url(./images/welcome-mb.jpeg) no-repeat;
    background-position: center;
    background-size: cover;
}
.display-3 {
  font-size: 28pt;
}
.welcome-text {
  padding-top: 10%;
  font-size: 8pt;
}
.tekstbokse {
  margin: auto;
}
.box-1 {
  background-position: bottom;
  padding-left: 15px;
  padding-top: 25px;
  padding-bottom: 275px;
}
.box-2 {
  background-position: bottom;
  padding-right: 15px;
  padding-top: 350px;
  padding-bottom: 275px;
}

我希望每个媒体查询中的样式都对应于相应的屏幕尺寸，但是样式既可以是通用CSS，也可以是前两个媒体查询中的样式。

Answer 1

您似乎对媒体查询的资格过高。

我将这些写为：

@media (max-width: 600px) {
    .stuff: rule;
}

我赞成使用最大宽度以防止样式重叠。

例如，如果您有

.element{
    width: 1000px;
}

@media (min-width: 600px) { 
    .element{
        width: 200px;
    }
}

页面至少为600像素，因此您可以使用媒体查询来覆盖您的标准样式。

使用相同的CSS代码的max-width将告诉页面，一旦宽度超过600px，则此规则不再适用，并且默认为您的原始类规则，完全忽略了媒体查询。

无法使用多个媒体查询

1 个答案: