Question

所以，这就是我到目前为止设置媒体查询的方式。

/* iPhone 4 -------------------------- */

@media only screen
and (min-device-width : 320px)
and (max-device-height : 480px)
and (orientation : portrait){
    /* Styles */
}

@media only screen
and (min-device-width : 320px)
and (max-device-height : 480px)
and (orientation: landscape){
    /* Styles */
}

/* iPhone 5 -------------------------- */

@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : portrait){
    /* Styles */
}

@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape){
    /* Styles */
};

/* iPhone 6 -------------------------- */

@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) 
and (orientation : landscape) 
and (-webkit-min-device-pixel-ratio : 2)
{ }

@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) 
and (orientation : portrait) 
and (-webkit-min-device-pixel-ratio : 2){ 
    /* Styles */
}

/* Smartphones (portrait) ----------- */

/* Smartphones (landscape) ----------- */


/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
    /* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
    /* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1280px) {
    /* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
    /* Styles */
}

我的问题是我无法按照我拥有的顺序加载这些查询的层次结构。一个以典型的不合逻辑的方式覆盖另一个。我在这里不理解什么？

iPhone 5媒体查询覆盖了iPhone 4 +其他层次结构问题

0 个答案: