标题背景填充在@media中未更改

昆根山姆

我对脚本和编码领域还很陌生，所以我不知道要使用的最佳术语。

我正在尝试制作一个稍微简单的网站，并且希望标题背景padding-bottom在min-width600px时具有120px，在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;
 }
}

padding-bottom不管min-width窗口大小如何，均保持在136px 。

马克·约瑟斯

确保您知道点的区别。.header选择标题类。Whileheader选择元素。您的代码运行正常，如您在此处看到的那样，我使用媒体查询来更改背景颜色而不是填充，只是为了使观点清楚。

小提琴的例子

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;
  }
}