响应式版本的 Css3 媒体查询

Question

我正在为响应版本使用一些媒体查询，但是对于最小的屏幕媒体查询，它会破坏整个代码。

这是我的媒体查询的结构!

/* 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) {

有了上面的结构，第三个媒体查询一点都不好。

我在样式表中使用第 3 个媒体查询编写了以下代码。

/***** For HTC Mobile *******/*3
@media only screen and (min-width: 0px) and (max-width: 320px) {

.module-title {
font-size: 25px !important;
line-height: 25px;


}
}

这段代码将所有版本的标题都设置为 25 号字体。

为什么这不仅仅适用于小屏幕，为什么它对所有版本都有效？

另外，我应该在所有类(class)的所有版本上使用 "!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;
}
}

有什么想法吗？

Answer 1

从非响应类中删除 !important。并确保您正确关闭媒体查询。

示例:

@media (max-width: 300px {

/*styles goes here*/
.tag {
} This is tag closing
} this is query closing