html媒体查询两个要求,html – CSS媒体查询相互覆盖

感谢Stack Overflow提供帮助.我有一些自定义css我用来收紧设计.我一直在遇到这个问题,如果我在一个媒体查询中改变某些内容,那么对于

iphone 6来说,那个改变会影响另一个设备,比如iphone 5.它成为了这个问题,我不断调整,看不到任何目的.这是我正在使用的@media断点.

/* IPHONE 6 PLUS */

@media only screen

and (min-device-width : 414px)

and (max-device-width : 736px)

and (orientation : portrait) {

}

/* IPHONE 6 */

@media only screen

and (min-device-width : 375px)

and (max-device-width : 667px)

and (orientation : portrait) {

}

/* IPHONE 5s */

@media only screen

and (min-device-width : 320px)

and (max-device-width : 568px)

and (orientation : portrait) {

}

/* IPAD LAYOUTS */

@media only screen

and (min-device-width : 768px)

and (max-device-width : 1024px) {

}

/* IPAD LANDSCAPE */

@media only screen

and (min-device-width: 768px)

and (max-device-width: 1024px)

and (orientation: landscape)

and (-webkit-min-device-pixel-ratio: 1) {

}

任何帮助都会得到很大的帮助.