Question

我有一个媒体查询，它应该将div的大小从100％更改为固定的2000px。它们有不同的样式表。

在标题中，contact.css是ABOVE styles.css 这是一个没有看到规则的控制台的图像，它甚至没有显示出通过：https://gyazo.com/dd140a95ed8a7d3454f5568a86f49bdc

（在此图片中，浏览器大小已减少到小于700像素）

contact.html：

<link rel="stylesheet" href="css/contact.css">
<link rel="stylesheet" href="css/styles.css">

contact.css：

#PageC {
    position: absolute;
    z-index: 3;
    width: 100%;
    height: 100%;
}

styles.css中的媒体查询：

@media screen and (max-width: 700px) {

#pageC {
    height: 2000px;
    margin-top: 120px;
}

}

Answer 1

选择器#pageC和#PageC不一样。

修复它，它将按预期方式为您服务。

@media screen and (max-width: 700px) {
   #PageC {
      height: 2000px;
      margin-top: 120px;
   }
}

Answer 2

首先，在contact.css中，您使用完全不同的选择器#PageC和styles.css #pageC。由于选择器的 case-sensivity ，它不起作用。其次，我建议你把#pageC的所有风格放在一个地方，因为它有助于优化你的工作。例如，page.css看起来如此：

#pageC {
    position: absolute;
    z-index: 3;
    width: 100%;
    height: 100%;
}

@media screen and (max-width: 700px) {
   #pageC {
    height: 2000px;
    margin-top: 120px;
   }
}

媒体查询中的CSS规则无法识别？

2 个答案: