我正在为响应版本使用一些媒体查询，但是使用最小的屏幕媒体查询会破坏整个代码。
这是我媒体查询的结构！
/* Landscape phone to portrait tablet */*1
@media (min-width: 480px) and (max-width: 767px) {
/* All Smartphones in portrait and landscape ----------- */*2
@media only screen and (min-width: 321px) and (max-width: 479px) {
/* Styles */
/***** For HTC Mobile *******/*3
@media only screen and (min-width: 0px) and (max-width: 320px) {
使用上述结构，第三个媒体查询根本不好。
我在样式表中使用第三个媒体查询编写了以下代码。
/***** For HTC Mobile *******/*3
@media only screen and (min-width: 0px) and (max-width: 320px) {
.module-title {
font-size: 25px !important;
line-height: 25px;
}
}
此代码将所有版本的标题改为font-size 25。
为什么这不仅仅适用于小屏幕以及为什么它会对所有版本生效？
另外，我应该在所有类的所有版本上使用“！important”吗？
喜欢：
/* Landscape phone to portrait tablet */*1
@media (min-width: 480px) and (max-width: 767px) {
.module-title: 30px !important;
}
}
/* All Smartphones in portrait and landscape ----------- */*2
@media only screen and (min-width: 321px) and (max-width: 479px) {
/* Styles */
.module-title: 27px !important;
}
}
/***** For HTC Mobile *******/*3
@media only screen and (min-width: 0px) and (max-width: 320px) {
.module-title: 30px !important;
}
}
有什么想法吗？
答案 0 :(得分：0)
从无响应的班级中删除!important。并确保您正确关闭媒体查询。
示例：
@media (max-width: 300px {
/*styles goes here*/
.tag {
} This is tag closing
} this is query closing
答案 1 :(得分：0)
这种语法非常错误：
/* Landscape phone to portrait tablet */*1
@media only screen and (min-width: 321px) and (max-width: 479px) {
/* Styles */
.module-title: 27px !important;
}
}
...因为你不能只为选择器提供一个属性！
代码上方的评论后*1是 在评论之外 。
所以问题是那个和双括号。如果在其他!important media-queries，only screen或min-width: 321px中符合任何条件，则下面的max-width: 479只会破坏其他查询。
@media only screen and (min-width: 321px) and (max-width: 479px) {
.module-title { font-size: 27px !important; }
}
它不会影响下面的媒体查询，例如：
@media only print and (min-width: 480px) {
.module-title { font-size: 27px; }
}
上面的语法是正确的。