如何将多个设备css组合到一个类中

Question

我需要知道可以将多个设备css组合到一个类中。

---

通常我们这样使用：

*CSS side*
@media (max-width: 991px) { .padding-991 {padding-left: 300px;} }
@media (max-width: 767px) { .padding-767 {padding-left: 100px;} }
@media (max-width: 479px) { .padding-479 {padding-left: 500px;} }
*HTML side*
<div class="padding-991 padding-767 padding-479"></div>

---

这里是我测试过但不起作用的例子

*CSS side*
.padding {
@media (max-width: 991px) {padding-left: 300px;}
@media (max-width: 767px) {padding-left: 100px;}
@media (max-width: 479px) {padding-left: 50px;}
}
*HTML side*
<div class="padding"></div>

所以我需要知道将多个设备css组合到一个类是可能的。

Answer 1

你应该喜欢这样。

@media (max-width: 991px) {
.padding {
padding-left: 300px;
}
}
@media (max-width: 767px) {
.padding {
padding-left: 100px;
}
}
@media (max-width: 479px) {
.padding {
padding-left: 50px;
}
}