媒體查詢：基於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%; 
    } 
}