Html 如何在一个Css类中以更少的时间使用多个媒体查询？

我有一个更少的文件，其中包含一个简单的css类，需要为不同的屏幕大小应用不同的样式。以下代码仅适用于桌面（第一个

@desktop

媒体查询）。手机什么都不会发生。我已经尝试过这种语法的许多变体，但都没有成功，在文档中也没有发现任何与此相关的内容。您还可以看到（请注意，如果将屏幕拉伸到1024px以上，div将变为橙色，但当小于1024px时，它不会变为红色或绿色）。谢谢

html

---

这是一个问题

@tablet: ~"only screen and (min-width: @{phone-max-width}) and (max-width: @{desktop-min-width}";

将其移除片刻，您将看到手机屏幕显示绿色背景

---

您需要在末尾添加“）”，因为@tablet有一个问题

@tablet: ~"only screen and (min-width: @{phone-max-width}) and (max-width: @{desktop-min-width}";

将其移除片刻，您将看到手机屏幕显示绿色背景

您需要在末尾为@tablet添加“）”

@tablet: ~"only screen and (min-width: @{phone-max-width}) and (max-width: @{desktop-min-width}";