CSS：在一个类中定义媒体查询
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21323818/
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
CSS: define media query within one class
提问by cqcn1991
Is it possible to write something like
是否有可能写出类似的东西
.global-container
margin-top: 60px
background-image: $image-bg
@media(max-width: 767px)
margin-top: 0
background-image: none
So we can define the desktop and mobile css within a class
所以我们可以在一个类中定义桌面和移动 css
I've tried this, but it seems not working
我试过这个，但它似乎不起作用
UPDATE: This is actually working: http://css-tricks.com/media-queries-sass-3-2-and-codekit/
更新：这实际上是有效的：http: //css-tricks.com/media-queries-sass-3-2-and-codekit/
回答by Felix
You should do like this:
你应该这样做：
@media all and (max-width: 767px) {
.global-container {
margin-top: 0;
background-image: none;
}
}
If you want to target desktop, you can use:
如果要定位桌面，可以使用：
@media (min-width:1025px) {
.global-container {
margin-top: 0;
background-image: none;
}
}
I just notice you're using SASS, you can do like this:
我只是注意到你正在使用SASS，你可以这样做：
.global-container {
margin-top: 60px;
background-image: $image-bg;
@media (max-width: 767px) {
/* Your mobile styles here */
}
@media (min-width:1025px) {
/* Your desktop styles here */
}
}
回答by dkellner
In plain CSS, the answer is no.You can't. Media queries should always be an outer shell, encasing the inside to be applied under that condition.
在纯 CSS 中，答案是否定的。你不能。媒体查询应该始终是一个外壳，包含在该条件下应用的内部。
In SASS and LESS, however, it's fully valid.Any converter that supports nested curly brackets should be able to move the media query to the outside, therefore allowing CSS to work as said above. (You can check the output CSS after compiling sass/less file and see them do it.)
然而，在 SASS 和 LESS 中，它是完全有效的。任何支持嵌套大括号的转换器都应该能够将媒体查询移到外面，因此允许 CSS 如上所述工作。（您可以在编译 sass/less 文件后检查输出 CSS 并查看它们的执行情况。）
So, if you have something like this:
所以，如果你有这样的事情：
body {
background:green;
@media (min-width:1000px) {background:red;}
}
The screen will be green in CSS (because it ignores that weird @media thing inside body style definition block) and red in SASS/LESS (because it gets what you'd actually like to see).
屏幕在 CSS 中是绿色的（因为它忽略了 body 样式定义块中奇怪的 @media 东西）和在 SASS/LESS 中的红色（因为它得到了你真正想要看到的）。
To be exact, preprocessors will understand the snippet above as:
准确地说，预处理器会将上面的代码片段理解为：
body {
background: green;
}
@media (min-width: 1000px) {
body {
background: red;
}
}
回答by Nicholas Hazel
You definitely have to apply some sort of multiple media queries. Code is not magic, and CSS requires specific paramaters for those sorts of queries.
您肯定必须应用某种多种媒体查询。代码不是魔术，CSS 需要特定的参数来处理这些类型的查询。
You could use JS, but that is not recommended based on your use case.
您可以使用 JS，但根据您的用例，不建议这样做。
Here is a CSS solution
这是一个CSS 解决方案
@media all and (minmax-width: 0px) and (min-width: 320px), (max-width: 320px)
{ Insert Code };
}'
回答by cqcn1991
It works:
有用：
.column-1-3 {
width: 33.3333%;
@media (max-width: 600px) {
width: 100%;
}
}
