css - 媒体查询 :Setting padding-top based for iPhone screen

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

最大设备宽度 VS 最大宽度。 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%;
  }
}