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更改爲該媒體查詢特定的內容。我在上面的示例中更改了它們以避免混淆。