花式媒体查询与一些LESS魔术

这将是很好的包装使用较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的文件中使用它。 也有点容易阅读。 🙂

Answer 2

我完全同意Hai Nguyen的回答（已经被接受），但是你可以通过这样做来清理它：

 @desktop: ~"only screen and (min-width: 960px) and (max-width: 1199px)"; @tablet: ~"only screen and (min-width: 720px) and (max-width: 959px)"; footer{ width: 100%; @media @tablet { width: 768px; } @media @desktop { width: 940px; } } 

它基本上是一样的东西，但让你嵌套在原始select器内的媒体查询。 它将特定元素的所有CSS保留在一起，并使您的样式更加模块化（与拆分断点方法相比）。

Answer 3

Nguyen和Yancey +1，还有一个补充。

如果你想要宽度的明确定义 ，你可以用你的断点的string interpolation和variables来完成。 在这里例如自举 – 严格的规则是防止定义重叠。

 /* setup */ @xs-min: 480px; @sm-min: 768px; @md-min: 992px; @lg-min: 1200px; @xs-max: (@sm-min - 1); @sm-max: (@md-min - 1); @md-max: (@lg-min - 1); @phone: ~"only screen and (min-width: @{xs-min})"; @phone-strict: ~"only screen and (min-width: @{xs-min}) and (max-width: @{xs-max})"; @tablet: ~"only screen and (min-width: @{sm-min})"; @tablet-strict: ~"only screen and (min-width: @{sm-min}) and (max-width: @{sm-max})"; @desktop: ~"only screen and (min-width: @{md-min})"; @desktop-strict: ~"only screen and (min-width: @{md-min}) and (max-width: @{md-max})"; @large: ~"only screen and (min-width: @{lg-min})"; /* usage */ footer{ width: 100%; @media @tablet { width: 768px; } @media @desktop { width: 940px; } } 

Answer 4

你也可以结合这样的媒体查询

 @media @desktop, @tablet, @ipad{ //common styles... } 

Answer 5

我们使用这样的设置：

 @vp_desktop: 801px; @vp_tablet: 800px; @vp_mobile: 400px; .OnDesktop(@rules) { @media screen and (min-width:@vp_desktop){ @rules(); } }; .OnTablet(@rules) { @media screen and (max-width:@vp_tablet){ @rules(); } }; .OnMobile(@rules) { @media screen and (max-width:@vp_mobile){ @rules(); } }; 

你只需要设置variables，混合就可以处理剩下的事情，所以它很容易维护，但仍然很灵活：

 div { display: inline-block; .OnTablet({ display: block; }); } 

值得一提的是，虽然这种技术非常简单，但如果使用不当，您的CSS输出将充满媒体查询。 我试图将我的媒体查询限制为每个断点1个文件。 如果文件是header.less或者search.less。

注意：除非你使用javascript编译器，否则这个方法可能不会编译。

Answer 6

我正在使用这些mixins和variables

 .max(@max; @rules){@media only screen and (max-width: (@max - 1)){@rules();}} .min(@min; @rules){@media only screen and (min-width: @min){@rules();}} .bw(@min; @max; @rules){@media only screen and (min-width: @min) and (max-width: (@max - 1)){@rules();}} @pad: 480px; @tab: 800px; @desktop: 992px; @hd: 1200px; 

所以这

 footer{ width: 100%; .bw(@tab,@desktop,{ width: 768px; }); .min(@desktop,{ width: 940px; }); } 

变

 footer { width: 100%; } @media only screen and (min-width: 800px) and (max-width: 991px) { footer { width: 768px; } } @media only screen and (min-width: 992px) { footer { width: 940px; } }