css - iPhone 媒体查询

Question

我是媒体查询的新手。有谁知道为什么这些 iPhone 6 和 iPhone 5 媒体查询相互冲突。我添加的查询不正确？我计划添加横向查询以及其他屏幕尺寸。

 /********* IPHONE 6 PORTRAIT**********/
 @media only screen 
 and (min-device-width : 375px) 
 and (max-device-width : 667px) 
 and (orientation : portrait) { 
 .topten {
    width: 100%;
    height: 1115px;
    float: left;
 }
 .submenu {
    width: 100%;
    float: left;
 }
 .toptenItem {
    width: 50%;
    height: 16.683%;
 }
 .imageDIV {
    height: 45%;
 }
 .imageDIV img {
    margin-top: 25px;
    height: 100%;
 }
.mealTitlePrice {
    height: 55%;
    padding-left: 10px;
 }
 .mealTitle {
    height: 20%;
    margin-top: 20%;
 }
 .mealTitle h1 {
    font-size: .55em;
    font-weight: bold;
 }
.mealPrice {
    margin-top: px;
}
.mealPrice h4 {
    padding-top: 2px;
}
}

/********* IPHONE 5 PORTRAIT**********/
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : portrait) {
 .topten {
    width: 100%;
    height: 1115px;
    float: left;
}
.toptenItem {
    width: 50%;
    height: 16.683%;
}
}

Answer 1

尝试将所有“通用”CSS 放在媒体查询之外的顶部。然后随着屏幕宽度/高度的变化更改您需要的内容。这为您提供了一个工作基础。

例如:

/********* BASE CSS **********/
 .toptenItem {
    width: 100%;
    height: 100%;
 }

/********* IPHONE 6 PORTRAIT**********/
@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) 
and (orientation : portrait) { 
 .toptenItem {
    width: 50%;
    height: 16.683%;
 }
}

/********* IPHONE 5 PORTRAIT**********/
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : portrait) {
 .toptenItem {
    width: 70%;
    height: 18%;
 }
}

此外，我注意到媒体查询中的 css 完全相同。通常情况并非如此，因为您正在尝试将 css 更改为特定于该媒体查询的内容。我在上面的示例中更改了它们以避免混淆。