html - 如何在 Less 中使用 Css 类中的多个媒体查询？

Question

我有一个 less 文件，其中包含一个简单的 css 类，需要为不同的屏幕尺寸应用不同的样式。以下代码仅适用于桌面(第一个 @desktop 媒体查询)。手机没有任何反应。我已经尝试了很多这种语法的变体，但都没有成功，而且在文档中也没有找到任何相关信息。您还可以看到 live demo here (请注意，如果将屏幕拉伸(stretch)到大于 1024px，div 会变成橙色，但当小于 1024px 时，它不会变成红色或绿色)。谢谢。

html

<div class="derp">
Hello
</div>

少

@desktop-min-width:         1024px;
@phone-max-width:           768px;

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

@appHeight:     749px;
@appWidth:      421px;

.derp {
  @media @desktop {
      background-color: orange;
    }

  @media @tablet {
      background-color: red;
    }

  @media @phone {
    background-color: green;
  }
}

Answer 1

有问题

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

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

你需要在末尾为@tablet 添加")"