媒体查询：为iPhone屏幕设置padding-top

Question

普通CSS：

.container-step1 {
  text-align: center;
  margin: 0 auto;
  padding-top: 12%;
  width: 50em !important;/*60em*/
  height: 35em;
}

对于移动设备，我想更新padding-top:25%;。我试过了：

@media only screen and (max-device-width: 480px) {
  .container-step1 {
  text-align: center;
  margin: 0 auto;
  padding-top: 25%;
  width: 50em !important;/*60em*/
  height: 35em;
}
}

它不起作用。 Safari仍指正常的CSS。

Answer 1

max-device-width VS max-width。 max-width将适用于桌面版和移动设备和max-device-width仅适用于移动设备。

此外，您只需要添加查询中更新的css。您可以删除所有冗余的CSS。

.container-step1 {
  text-align: center;
  margin: 0 auto;
  padding-top: 12%;
  width: 50em !important;/*60em*/
  height: 35em;
}

@media only screen and (max-device-width: 480px) {
  .container-step1 {
    padding-top: 25%;
  }
}