如何在更少的CSS类中使用多个媒体查询？

Question

我有一个较少的文件，其中包含一个简单的CSS类，该类需要针对各种屏幕尺寸应用不同的样式。 以下代码仅在桌面上有效（第一个@desktop媒体查询）。 手机没有任何反应。 我很幸运地尝试了这种语法的许多变体，也没有在文档中找到与此有关的任何内容。 您还可以在此处观看实时演示 （请注意，如果将屏幕拉伸到大于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处添加“）”