我正在编辑一个预先存在的样式表。它目前有 0-319px 和 320-479px 的@media 部分,以及其他一些用于更大屏幕的部分。我正在尝试添加特定于 iPhone 的样式。但是,我的iphone的屏幕是320px,但是我不想把iphone的样式放在320-479这一段,因为我只想应用到iphone,而不是平板。因此,我在样式表末尾添加了一个新部分,最大为 329 像素,并将特定样式放在那里,但它们未被识别。
@media screen and (min-width: 0px) and (max-width: 319px) {
.carousel-slide-dialog {
position: relative !important;
margin-top: 1px;
height: auto;
padding: 0 0 24px 25px;
width: 100%;
background-color: #de0662;
}
}
@media screen and (min-width: 320px) and (max-width: 479px) {
.carousel-slide-dialog {
position: relative !important;
margin-top: 1px;
height: auto;
min-height: 90px;
padding: 0 0 24px 25px;
width: 100%;
background-color: #de0662;
}
}
@media screen and (max-width: 329px) {
.carousel-slide-dialog {
min-height: 115px;
}
.carousel-slide-dialog p {
max-width: 235px;
}
}
当我在开发工具中查看样式表时,我的新部分就在那里,所以这不是缓存问题。但它没有被应用(我的窗口大小为 323 像素)。
最佳答案
您的前两个媒体查询大部分相同,除了 320-479 中的 min-height 属性。此外,@media screen and (min-width: 0px) and (max-width: 319px)
本质上与 @media screen and (max-width: 319px) 相同
你为什么不重构媒体查询,这样就不会有重叠的媒体查询,就像这样:
@media screen {
.carousel-slide-dialog {
position: relative !important;
margin-top: 1px;
height: auto;
padding: 0 0 24px 25px;
width: 100%;
background-color: #de0662;
}
}
@media screen and (max-width: 319px) {
.carousel-slide-dialog {
min-height: initial;
}
.carousel-slide-dialog p {
max-width: initial;
}
}
@media screen and (min-width: 320px) and (max-width: 329px) {
.carousel-slide-dialog {
min-height: 115px;
}
.carousel-slide-dialog p {
max-width: 235px;
}
}
@media screen and (min-width: 330px) and (max-width: 479px) {
.carousel-slide-dialog {
min-height: 90px;
}
.carousel-slide-dialog p {
max-width: initial;
}
}
关于html - @media 部分样式未被应用;其他@media 部分工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28178230/