iPhoneメディアのクエリ

Question

私はメディアクエリーに新人です。誰もがなぜこれらのiPhone 6とiPhone 5のメディアクエリーがお互いに矛盾しているか知っていますか？私は間違ってクエリを追加していますか？他の画面サイズとともにLandscapeクエリを追加する予定です。

/********* 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をそのメディアクエリに特有のものに変更しようとしているので、これは当てはまりません。私は混乱を避けるために上記の例でそれらを変更しました。