我iPhoneX媒体查询是压倒一切我其他媒体查询。我所有的其他媒体查询的接收使用最小/最大宽度他们coirreect屏幕尺寸..但出于某种原因IphoneX使所有无效的其他媒体查询。谁能帮助吗?
/* images */
img{
max-width: 250px;
width: 100%;
}
/* Header image */
.headerImg{
max-width: 250px;
margin: 0 auto;
padding-top: 10px;
}
/* Title */
.title{
max-width: 250px;
margin: 0 auto;
padding-top: 20px;
}
/* voting buttons */
.vote{
position:relative;
text-align: center;
padding-top: 20px;
}
#vote1 .dot{
width: 13px;
height: 13px;
background-color: white;
border-radius: 50%;
position: absolute;
top: 28px;
left: 15px;
border: 2px solid white;
}
#vote2 .dot{
width: 13px;
height: 13px;
background-color: white;
border-radius: 50%;
position: absolute;
top: 30px;
left: 24px;
border: 2px solid white;
}
/* GLOBAL CLASSES */
.flexCenter{
display: flex;
justify-content: center;
align-items: center;
}
.paddingTopBottom{
padding: 10px 0;
}
<!-- iPhone4/4s -->
<link href="https://pub.s6.exacttarget.com/vaf4d25yesa" rel="stylesheet" media="screen and (min-device-width: 320px) and (max-device-width: 480px)">
<!-- iPhone5s/5c/5se -->
<link href="https://pub.s6.exacttarget.com/asgp1bospyf" rel="stylesheet" media="screen and (min-device-width: 320px) and (max-device-width: 568px)">
<!-- iPhone6/6s/7/8 -->
<link href="https://pub.s6.exacttarget.com/c3c1pf4b2me" rel="stylesheet" media="screen and (min-device-width: 375px) and (max-device-width: 667px)">
<!-- iPhone6+/7+/8+ -->
<link href="https://pub.s6.exacttarget.com/qjhe5zmjrys" rel="stylesheet" media="screen and (min-device-width: 414px) and (max-device-width: 736px)">
<!-- iPhoneX -->
<link href="https://pub.s6.exacttarget.com/ioeyyyvvogl" rel="stylesheet" media="screen and (min-device-width: 375px) and (max-device-width: 812px)">
这里有链接的媒体查询。
/* Media queries for mobile sizes */
/* ----------- iPhone X ----------- */
/* Portrait and Landscape */
@media only screen and (min-device-width: 375px) and (max-device-width: 812px) {
.headerImg{max-width: 280px !important;padding-top: 50px !important}
.title{max-width: 280px !important;padding-bottom: 50px !important;padding-top: 25px !important;}
.deal{max-width: 115px !important;}
.vote {padding-top: 0 !important;}
#vote1 .dot {top: 11px !important;left: 15px !important;}
#vote2 .dot {top: 11px !important;left: 9px !important;}
.smartcapture-submit-button-wrapper{bottom: 120px !important;}
.sc-button{height: 45px !important; width: 160px !important;}
}
/* ----------- iPhone 6+, 7+ and 8+ ----------- */
/* Portrait and Landscape */
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) {
.headerImg{max-width: 280px !important;padding-top: 20px !important}
.title{max-width: 280px !important;padding-bottom: 40px !important;}
.deal{max-width: 115px !important;}
.vote {padding-top: 0 !important;}
#vote1 .dot {top: 13px !important;left: 17px !important;}
#vote2 .dot {top: 13px !important;left: 11px !important;}
.smartcapture-submit-button-wrapper{bottom: 80px !important;}
.sc-button{height: 45px !important; width: 160px !important;}
}
/* ----------- iPhone 6, 6S, 7 and 8 ----------- */
/* Portrait and Landscape */
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) {
.headerImg{max-width: 280px !important;padding-top: 20px !important}
.title{max-width: 280px !important;padding: 10px 0 !important;}
.deal{max-width: 115px !important;}
.vote {padding-top: 0 !important;}
#vote1 .dot {top: 11px !important;left: 15px !important;}
#vote2 .dot {top: 11px !important;left: 9px !important;}
.smartcapture-submit-button-wrapper{bottom: 80px !important;}
.sc-button{height: 45px !important; width: 160px !important;}
}
/* ----------- iPhone 5, 5S, 5C and 5SE ----------- */
/* Portrait and Landscape */
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) {
.headerImg{max-width: 200px !important;padding-top: 20px !important}
.title{max-width: 200px !important;padding: 10px 0 !important;}
.deal{max-width: 100px !important;}
.vote {padding-top: 0 !important;}
#vote1 .dot {top: 7px !important;left: 15px !important;}
#vote2 .dot {top: 7px !important;left: 9px !important;}
.smartcapture-submit-button-wrapper{bottom: 60px !important;}
}
/* ----------- iPhone 4 and 4S ----------- */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
.headerImg{max-width: 170px !important;}
.title{max-width: 160px !important;padding: 10px 0 !important;}
.deal{max-width: 110px !important;}
.vote {padding-top: 0 !important;}
#vote1 .dot {top: 7px !important;left: 15px !important;}
#vote2 .dot {top: 7px !important;left: 9px !important;}
.smartcapture-submit-button-wrapper{bottom: 60px !important;}
}
/* ----------- Galaxy S4, S5 and Note 3 ----------- */
/* Portrait and Landscape */
@media screen and (device-width: 320px) and (device-height: 640px) and {
.headerImg{max-width: 240px !important;padding-top: 50px !important}
.title{max-width: 240px !important;padding-bottom: 40px !important;padding-top: 15px !important;}
.deal{max-width: 115px !important;}
.vote {padding-top: 0 !important;}
#vote1 .dot {top: 9px !important;left: 15px !important;width: 10px !important;; height: 10px !important;}
#vote2 .dot {top: 9px !important;left: 9px !important;width: 10px !important;; height: 10px !important;}
.smartcapture-submit-button-wrapper{bottom: 90px !important;}
.sc-button{height: 45px !important; width: 160px !important;}
}
当我从媒体查询删除!重要的是,没有被拾起,而仅默认样式。
任何帮助极大的赞赏。
谢谢
Erayner,
媒体查询可能会非常棘手...
如果你有以下的iPhone 6,7和8个媒体查询语句中的iPhone 4媒体查询语句,它会(其实)覆盖iPhone 6,7和8之一,因为它的上市在它下面。 CSS文件被读从上到下。例如:
<style>
.className {
width: 50%;
}
.className {
width: 100%;
}
</style>
与.className
的宽度第二100%
将采取,因为它是最后(从顶部被读取到下)。
另一个原因是压倒一切的,因为iPhone 4的媒体查询具有480像素的一系列320像素,而iPhone 6,7和8人有iPhone 4的范围(375px到667px)内的地址范围。 375通过480像素下降iPhone 4的范围...并因为它是下面的iPhone 6,7和8的代码,它的优先级...
另外,不知道为什么你有很多的sooo呼吁!important
- 也许能帮助我们更好地了解您的具体情况更好,如果你提供你的整个CSS文件以了解您的ID和班级的顺序。
您是否尝试过把iPhone 4的媒体查询码的iPhone 6,7和8层的上面?如果是的话,你有同样的问题?
只需将iPhone 6的人面前把你的iPhone 4 @media
规则。所以iPhone 6将然后覆盖iPhone 4时的宽度为375px或更高。
该规则时,宽度为320像素和374px之间下面将适用..
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {...}
规则时宽度为375px和667px之间下面将覆盖;
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2){...}