页眉背景填充在@media中未更改

Question

我对脚本和编码世界相当陌生，所以我不知道最好的术语。

我正在尝试制作一个稍微简单的网站，我希望我的标题背景在min-width600 像素时为padding-bottom120px，在 1050 时为 0。但是，底部填充仅在标头的属性中发生更改时才更新。

这是我的代码：

header {
border-radius: 5px;
display: block;
width: auto;
min-height: 200px;
background: #E44;
padding-top: 40px;
padding-left: 38px;
padding-right: 38px;
padding-bottom: 136px;
}
@media screen and (min-width: 600px) {
.header {
padding-bottom:120px
}
}
@media screen and (min-width: 1050px) {
.header {
padding-bottom: 0px;
}
}

无论窗口min-width如何，padding-bottom都保持在 136px。

Answer 1

确保您知道点的区别。.header选择标头类。当header选择元素时。您的代码工作正常，正如您在此处看到的，我正在使用媒体查询来更改背景颜色而不是填充，只是为了明确这一点。

小提琴示例

header {
border-radius: 5px;
display: block;
width: auto;
min-height: 200px;
background: #E44;
padding-top: 40px;
padding-left: 38px;
padding-right: 38px;
padding-bottom: 136px;
}
@media screen and (min-width: 600px) {
.header {
background-color: blue;
}
}
@media screen and (min-width: 1050px) {
.header {
background-color: green;
}
}

<header class="header">

</header>

Answer 2

这里有一个小错别字。您有一个额外的dot(.)，这意味着与element selector上的其他样式相比，这是一个class selector。

@media screen and (min-width: 600px) {
header {
padding-bottom:120px
}
}
@media screen and (min-width: 1050px) {
header {
padding-bottom: 0px;
}
}