花式媒体查询少一些魔法 [英] Fancy Media Queries with some LESS Magic
本文介绍了花式媒体查询少一些魔法的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
在一些 css-classes 中使用 less 包装不同分辨率的 css-styles 会很好.
It would be nice to wrap css-styles for different resolutions within some css-classes using less.
我想做类似的事情:
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 可能看起来像这样:
.tablet could look somehow like this:
@media screen and (min-width: 768px) {
.tablet {
}
}
希望有人有好主意!
推荐答案
以下是我在我的项目中所做的:
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;
}
}
这允许您只定义一次媒体查询,并且您可以在整个 less 文件中使用它.也更容易阅读.:)
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. :)
这篇关于花式媒体查询少一些魔法的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文