CSS 花式媒体查询少一些魔法
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15837808/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Fancy Media Queries with some LESS Magic
提问by Andre Zimpel
It would be nice to wrap css-styles for different resolutions within some css-classes using less.
在一些 css-classes 中使用 less 包装不同分辨率的 css-styles 会很好。
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:
.tablet 可能看起来像这样：
@media screen and (min-width: 768px) {
.tablet {
}
}
Hope somebody has a nice idea!
希望有人有个好主意！
回答by Hai Nguyen
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 文件中使用它。也更容易阅读。:)
回答by Joseph Yancey
I completely agree with Hai Nguyen's answer (which has been accepted) but you can clean it up a bit more by doing something like this:
我完全同意 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;
}
}
It's essentially the same thing but lets you nest your media queries inside of the original selector. It keeps all css for a specific element together and makes your styles much more modular (vs the split breakpoint approach).
它本质上是一样的，但允许您将媒体查询嵌套在原始选择器中。它将特定元素的所有 css 保持在一起，并使您的样式更加模块化（与拆分断点方法相比）。
回答by SunnyRed
+1 for Nguyen and Yancey - and one more addition.
Nguyen 和 Yancey +1 - 还有一个补充。
If you want explicit definitionof the widths, you can accomplish that with string interpolationand variables for your breakpoints. Here for example with those of bootstrap - the strict rules are to prevent definition overlapping.
如果您想要明确定义宽度，您可以使用string interpolation断点的 和 变量来实现。这里以引导程序为例 - 严格的规则是防止定义重叠。
@screen-xs-min: 480px;
@screen-sm-min: 768px;
@screen-md-min: 992px;
@screen-lg-min: 1200px;
@screen-xs-max: (@screen-sm-min - 1);
@screen-sm-max: (@screen-md-min - 1);
@screen-md-max: (@screen-lg-min - 1);
@phone: ~"only screen and (max-width: @{screen-xs-min})";
@phone-strict: ~"only screen and (min-width: @{screen-xs-min}) and (max-width: @{screen-xs-max})";
@tablet: ~"only screen and (min-width: @{screen-sm-min})";
@tablet-strict: ~"only screen and (min-width: @{screen-sm-min}) and (max-width: @{screen-sm-max})";
@desktop: ~"only screen and (min-width: @{screen-md-min})";
@desktop-strict: ~"only screen and (min-width: @{screen-md-min}) and (max-width: @{screen-md-max})";
@large: ~"only screen and (min-width: @{screen-lg-min})";
footer{
width: 100%;
@media @tablet {
width: 768px;
}
@media @desktop {
width: 940px;
}
}
回答by kedomonzter
And you can also combine media queries like this
你也可以像这样组合媒体查询
@media @desktop, @tablet, @ipad{
//common styles...
}
回答by M_Willett
We use a setup like this:
我们使用这样的设置：
@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(); } };
You only need to set variables, the mixins handle the rest so it's very easy to maintain yet still flexible:
你只需要设置变量，mixin 处理其余的，所以它很容易维护，但仍然很灵活：
div {
display: inline-block;
.OnTablet({
display: block;
});
}
It is worth mentioning that while this technique is very easy, if used badly your CSS output will be full of media queries. I try to limit my media queries to 1 per-breakpoint, per-file. Where a file would be header.less or search.less.
值得一提的是，虽然这项技术非常简单，但如果使用不当，您的 CSS 输出将充满媒体查询。我尝试将媒体查询限制为每个断点、每个文件 1 个。文件将是 header.less 或 search.less。
N.B. This method probably won't compile unless you're using the javascript compiler.
注意，除非您使用 javascript 编译器，否则此方法可能无法编译。
回答by Atul Gupta
I am using these 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;
So this
所以这
footer{
width: 100%;
.bw(@tab,@desktop,{
width: 768px;
});
.min(@desktop,{
width: 940px;
});
}
becomes
变成
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;
}
}
回答by Sunil Rajput
And this is what I have used for my project:
这就是我在我的项目中使用的：
@mobile: ~"only screen and (min-width: 320px) and (max-width: 767px)";
@tablet: ~"only screen and (min-width: 768px) and (max-width: 991px)";
@ipad: ~"only screen and (min-width: 992px) and (max-width: 1024px)";
@media @mobile {
.banner{
width: auto;
}
}
@media @tablet {
.banner{
width: 720px;
}
}
@media @ipad {
.banner{
width: 920px;
}
}
回答by Sanket Suthar
@highdensity: ~"only screen and (-webkit-min-device-pixel-ratio: 1.5)",
~"only screen and (min--moz-device-pixel-ratio: 1.5)",
~"only screen and (-o-min-device-pixel-ratio: 3/2)",
~"only screen and (min-device-pixel-ratio: 1.5)";
@mobile: ~"only screen and (max-width: 750px)";
@tab: ~"only screen and (min-width: 751px) and (max-width: 900px)";
@regular: ~"only screen and (min-width: 901px) and (max-width: 1280px)";
@extra-large: ~"only screen and (min-width: 1281px)";
