媒体查询：基于iPhone屏幕设置填充顶

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