如何在 Less Css Class 中使用多个媒体查询？

Question

我有一个包含简单 css class 的 less 文件，需要为不同的屏幕尺寸应用不同的样式。以下代码仅适用于桌面（第一个 @desktop 媒体查询）。手机没有任何反应。我已经尝试了很多这种语法的变体，但都没有成功，而且在文档中也没有找到任何相关信息。您还可以看到 live demo here（请注意，如果将屏幕拉伸到大于 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}";

稍等一下，您会看到 phone 屏幕显示绿色背景。

您需要在最后为@tablet 添加“)”

如何在 Less Css Class 中使用多个媒体查询？

How To Use Multiple Media Queries Within A Css Class In Less?

html

css

less