css3 – 一些LESS魔法的花哨媒体查询

前端之家收集整理的这篇文章主要介绍了css3 – 一些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 {

  }
}

希望有人有一个好主意!

解决方法

这里是我在我的项目:
@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;
  }
}

这允许您只定义一次媒体查询,您可以在更少的文件中使用它。还有一点更容易阅读。

猜你在找的CSS相关文章