Question

我有一个较少的文件，其中包含一个简单的CSS类，该类需要针对各种屏幕尺寸应用不同的样式。以下代码仅适用于台式机（第一个@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}";

将其删除一会儿，您将看到绿色背景显示在电话屏幕上。

您需要在最后的@tablet处添加“）”

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

1 个答案: