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

【问题标题】：How to combine multiple device css to one class如何将多个设备 css 组合到一个类中
【发布时间】：2022-09-23 12:11:01
【问题描述】：

我需要知道可以将多个设备 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 组合到一个类中。

第一种方法是正确的，但不是为断点命名类，而是在每个媒体查询中使用 .padding ，它将根据屏幕大小进行覆盖。您只需要一个类名。
谢谢@JHeth！这就是我需要的问题的实际答案。哈哈

标签： html css

【解决方案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;
   }
}

【讨论】：

感谢您澄清示例。对像我这样的新手有很大帮助
不客气。我希望你做得很好。现在我们可以聊吗？