css - 移动设备的媒体屏幕无法正常工作

Question

我有以下媒体屏幕分辨率。

  /*IPHONE 5 */
@media screen and (min-device-width : 320px) and (max-device-width :
568px) and (orientation : portrait) {
.box h1 {
    top: 40px;
    font-size: 1.5em !important;
}
}
/*IPHONE 5 */
@media screen and (min-device-width : 320px) and (max-device-width :
568px) and (orientation : landscape) {
.box h1 {
    padding: 50px;
    font-size: 2em !important;
}
}
 /*IPHONE 7 */
 @media screen and (min-device-width : 375px) and (max-device-width :
 667px) and (orientation : portrait) {
 .box h1 {
    font-size: 2em !important;
 }
}
/*IPHONE 7 */
@media screen and (min-device-width : 375px) and (max-device-width :
667px) and (orientation : landscape) {
.box h1 {
    padding: 55px;
    font-size: 2.1em !important;
}
}

现在的问题是，如果我在 IPHONE 5 环境中更改某些内容，它不会执行任何操作。但是，如果我在 IPHONE 7 分辨率范围内更改某些内容，它将对 IPHONE 5 和 IPHONE 7 生效。 那有什么问题吗？

编辑

我的 HTML:

<div class="box">

    <h1 id="suchen"><span>Suchen</span></h1>

    <h1><span>Favoriten</span></h1>

    <h1><span>Neu</span></h1>

</div>

Answer 1

试试这个

 /*IPHONE 7 */
 @media screen and (min-device-width : 375px) and (max-device-width :
 667px) and (orientation : portrait) {
 .box h1 {
    font-size: 2em !important;
 }
}
/*IPHONE 7 */
@media screen and (min-device-width : 375px) and (max-device-width :
667px) and (orientation : landscape) {
.box h1 {
    padding: 55px;
    font-size: 2.1em !important;
}
}
 /*IPHONE 5 */
@media screen and (min-device-width : 320px) and (max-device-width :
568px) and (orientation : portrait) {
.box h1 {
    top: 40px;
    font-size: 1.5em !important;
}
}
/*IPHONE 5 */
@media screen and (min-device-width : 320px) and (max-device-width :
568px) and (orientation : landscape) {
.box h1 {
    padding: 50px;
    font-size: 2em !important;
}
}