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

【问题标题】：How To Use Multiple Media Queries Within A Css Class In Less?如何在 Less 中使用 Css 类中的多个媒体查询？
【发布时间】：2018-11-07 22:02:48
【问题描述】：

我有一个 less 文件，其中包含一个简单的 css 类，它需要为各种屏幕尺寸应用不同的样式。以下代码仅适用于桌面（第一个 @desktop 媒体查询）。手机没有任何反应。我已经尝试了这种语法的许多变体，但没有运气，并且在文档中没有找到任何关于此的内容。您还可以看到live demo here（请注意，如果您将屏幕拉伸到超过 1024 像素，那么 div 会变成橙色，但当小于 1024 像素时它不会变成红色或绿色）。谢谢。

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;
  }
}

【问题讨论】：

标签： html css less

【解决方案1】：

有问题

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

稍等片刻，您会看到手机屏幕显示绿色背景。

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

【讨论】：