css - 带有一些 LESS 魔法的花式媒体查询

Question

如果使用 less 在一些 css 类中包装不同分辨率的 css 样式会很好。

我想做这样的事情:

footer {
  width: 100%;
}

.tablet {
  footer {
    width: 768px;
  }
}

.desktop {
  footer {
    width: 940px;
  }
}

最后应该是这样的结果:

footer {
  width: 100%;
}

@media screen and (min-width: 768px) {
  footer {
    width: 768px;
  }
}

@media screen and (min-width: 992px) {
  footer {
    width: 940px;
  }
}

.tablet 可能看起来像这样:

@media screen and (min-width: 768px) {
  .tablet {

  }
}

希望有人有好主意!

Answer 1

这是我在元素中所做的:

@desktop:   ~"only screen and (min-width: 960px) and (max-width: 1199px)";
@tablet:    ~"only screen and (min-width: 720px) and (max-width: 959px)";

@media @desktop {
  footer {
    width: 940px;
  }
}

@media @tablet {
  footer {
    width: 768px;
  }
}

这允许您只定义一次媒体查询，并且可以在整个 less 文件中使用它。也更容易阅读。 :)