css - 媒体查询相互覆盖 - 奇怪的情况
问题描述
我的 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;}
}
当我从媒体查询中删除 !important 时,不会选择任何内容,而只会选择默认样式。
非常感谢任何帮助。
谢谢
解决方案
埃雷纳,
媒体查询可能很棘手......
如果您在 iPhone 6,7&8 媒体查询语句下方有 iPhone 4 媒体查询语句,它将(实际上)覆盖 iPhone 6,7&8 之一,因为它在它下面列出。CSS 文件从上到下读取。例如:
<style>
.className {
width: 50%;
}
.className {
width: 100%;
}
</style>
.className
宽度为的第二个100%
将从最后一个开始(从上到下读取)。
它的另一个原因是 iPhone 4 媒体查询的范围为 320 像素到 480 像素,而 iPhone 6,7 和 8 的范围在 iPhone 4 的范围内(375 像素到 667 像素)。375 到 480 像素属于 iPhone 4 的范围...由于它低于 iPhone 6,7 和 8 的代码,因此优先...
此外,不知道为什么你有这么多的!important
电话 - 如果你提供你的整个 css 文件来了解你的 ID 和类的顺序,可以帮助我们更好地了解你的特定情况。
您是否尝试过将 iPhone 4 的媒体查询代码置于 iPhone 6,7 和 8 之上?如果是这样,你有同样的问题吗?
推荐阅读
- elasticsearch - 无法将多行事件从 Filebeat S3 输入推送到 Logstash
- flutter - 如何聚焦未验证的文本字段?
- sql - 为什么连接两个表并且一个表有很多行时执行SQL查询需要很长时间
- python - 如何使用 Python 将值作为数字而不是文本从 .txt 粘贴到 Excel?
- php - date_i18n 函数显示今天的日期而不是提供的日期
- python - AWS Python:从响应返回值
- vue.js - VueJS - 函数的结果作为 Prop 的默认值
- python-3.x - Pyinstaller python 3.8缺少名为的模块
- mongodb - 如果没有,不要插入 mongo - scala
- ruby-on-rails - Rails6 搜索功能