css - 媒体查询：为 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-widthVS 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%;
  }
}