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

尝试放置所有＆＃34; common＆＃34;在媒体查询之外的顶部的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更改为特定于该媒体查询的内容。我在上面的示例中更改了它们以避免混淆。

iPhone媒体查询

1 个答案: