CSS：仅在特定mediaquery中应用规则？

以下情况

/* @media screen and (min-width: 480px) */
@media screen and (min-width: 30em) {
     #el { background:red; }
}

/* @media screen and (min-width: 640px) */
@media screen and (min-width: 40em) {
     #el { background:none; }
}

因此，如果视口小于480px

#el

应为红色，如果视口更宽，则应不应用背景色

是否有一些css技巧只对

minwidth:30em

应用此规则，这样我就不必在下一个mediaquery中“重置”它

你对此有何想法？ 提前谢谢你

这样试试看

@media screen and (min-width: 30em) and (max-width: 40em) {
     #el { background:red; }
}

小提琴示例：

用这种方法试试

@media screen and (min-width: 30em) and (max-width: 40em) {
     #el { background:red; }
}

---

小提琴示例：

如果希望

#e1

的背景在某个断点下方为红色，则应使用

最大宽度

。如果要为大于某个断点的视口应用样式规则，则应使用

minwidth

。在您的示例中：

@媒体屏幕和（最小宽度：30em）

，只有当视口大于30em时，背景才会为红色-一旦达到40em，它将恢复为无（根据您的其他规则）。要为小于480px的视口设置背景，只需使用

max width

，您甚至不必担心“重置”，因为一旦视口超过480px，该规则将不适用

/* @media screen and (max-width: 480px) */
@media screen and (max-width: 30em) {
    #el { background:red; }
}

---

请记住，您在

minwidth

中声明的规则将应用于宽度大于您指定的断点宽度的视口。而

max width

中声明的规则将应用于小于断点宽度的视口。

如果希望

#e1

的背景在某个断点下方为红色，则应使用

max width

。如果要为大于某个断点的视口应用样式规则，则应使用

minwidth

。在您的示例中：

@媒体屏幕和（最小宽度：30em）

，只有当视口大于30em时，背景才会为红色-一旦达到40em，它将恢复为无（根据您的其他规则）。要为小于480px的视口设置背景，只需使用

max width

，您甚至不必担心“重置”，因为一旦视口超过480px，该规则将不适用

/* @media screen and (max-width: 480px) */
@media screen and (max-width: 30em) {
    #el { background:red; }
}

请记住，您在

minwidth

中声明的规则将应用于宽度大于您指定的断点宽度的视口。而

max width

中声明的规则将应用于小于断点宽度的视口