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

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

1 个答案: