花哨媒体查询与一些LESS魔法 [英] Fancy Media Queries with some LESS Magic

问题描述

我想做一些类似的工作：

  footer {
 width：100％; 
} 
 
 .tablet {
 footer {
 width：768px; 
} 
} 
 
 .desktop {
 footer {
 width：940px; 
} 
} 
  

结束时应该是这样的结果：

  footer {
 width：100％; 
} 
 
 @media屏幕和（min-width：768px）{
 footer {
 width：768px; 
} 
} 
 
 @media屏幕和（min-width：992px）{
 footer {
 width：940px; 
} 
} 
  

.tablet可能看起来像这样：

  @media screen and（min-width：768px）{
 .tablet {
 
} 
} 
  

希望有人有个好主意！

解决方案

这是我在我的项目中所做的：

  @desktop：〜只有屏幕和（最小宽度：960像素）和（最大宽度：1199像素）; 
 @tablet：〜only screen and（min-width：720px）and（max-width：959px）; 
 
 @media @desktop {
 footer {
 width：940px; 
} 
} 
 
 @media @tablet {
 footer {
 width：768px; 
} 
} 
  

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

It would be nice to wrap css-styles for different resolutions within some css-classes using less.

I'd like to do something like:

footer {
  width: 100%;
}

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

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

At the end something like this should be the result:

footer {
  width: 100%;
}

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

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

.tablet could look somehow like this:

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

  }
}

Hope somebody has a nice idea!

解决方案

Here is what I've done in my projects:

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

This allows you to only define your media queries once and you can use it throughout your less files. Also a little easier to read. :)

这篇关于花哨媒体查询与一些LESS魔法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！