Question

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

我想创建一个有点简单的网站，我希望我的标题背景在padding-bottom 600px时为min-width 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。

Answer 1

这里有一个小错字。您还有一个dot(.)，这意味着class selector与element selector上的其他风格相对。

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

Answer 2

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

Fiddle example

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>

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

2 个答案: