CSS 我可以以 if/else 的方式使用 @media 吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17638804/
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
Can I use @media in an if/else kind of way?
提问by Ahmad
I have this form placed in the footer of my page (has just one text box and one button). I want to try and apply @mediato it, based on the viewport width available ... So for example, in my case the full width this form needs it about 270px or so. So I want to apply CSS to say that:
我将此表单放在页面的页脚中（只有一个文本框和一个按钮）。我想尝试应用@media它，基于可用的视口宽度......例如，在我的情况下，这个表单的全宽需要大约 270px 左右。所以我想应用 CSS 来说明：
if the width available is at least 270px
apply first set of CSS rules
else
apply second set of CSS rules
How can I do this using @media?
我怎样才能做到这一点@media？
回答by BoltClock
There's no if/else syntax for @media, so you would need to repeat the same media query in two separate @mediarules and use notfor one of them to mean "else".
没有 if/else 语法@media，因此您需要在两个单独的@media规则中重复相同的媒体查询，并使用not其中之一表示“else”。
In your case, the media query would be all and (min-width: 270px). (You need to have a media typefor notto work; the default is allso I'm just using that.)
在您的情况下，媒体查询将是all and (min-width: 270px). （您需要有一个媒体类型的not工作;默认是all，所以我只是使用。）
Your CSS would then look like this:
您的 CSS 将如下所示：
@media all and (min-width: 270px) {
/* Apply first set of CSS rules */
}
@media not all and (min-width: 270px) {
/* Apply second set of CSS rules */
}
I should add that one popular way is to make use of the cascade by having just one @mediarule for overriding styles:
我应该补充一点，一种流行的方法是通过只有一个@media覆盖样式的规则来利用级联：
/* Apply second set of CSS rules */
@media all and (min-width: 270px) {
/* Apply first set of CSS rules */
}
However this falls short if you have any styles outside the @mediarule that aren't (or cannot be) overridden inside it. Those styles would continue to apply, and you have no way of undoing them short of actually redeclaring them. Sometimes you cannotundo them by redeclaring them, and that's when you cannot use this method to apply styles. See my answer to this questionfor a detailed explanation.
但是，如果您在@media规则之外有任何没有（或不能）在其中被覆盖的样式，那么这将是不够的。这些样式将继续适用，除非实际重新声明它们，否则您无法撤消它们。有时您无法通过重新声明来撤消它们，这就是您无法使用此方法应用样式的时候。有关详细说明，请参阅我对这个问题的回答。
In this example, the height: 200pxdeclaration will alwaysapply:
在此示例中，height: 200px声明将始终适用：
.example {
width: 200px;
height: 200px;
}
@media all and (min-width: 270px) {
.example {
width: 400px;
}
}
Of course, if that's not a problem then you can use this in order to avoid duplicating media queries. But if you're looking for a strict if/else construct, then you'll have to use notand a duplicated media query.
当然，如果这不是问题，那么您可以使用它来避免重复媒体查询。但是，如果您正在寻找严格的 if/else 构造，那么您将不得不使用not重复的媒体查询。
回答by Shanosha
Yes. Typically start with your main CSS and then alter the design based on width (or media type) with additional CSS that will overwrite any previous CSS.
是的。通常从你的主 CSS 开始，然后根据宽度（或媒体类型）使用额外的 CSS 更改设计，这些 CSS 将覆盖任何以前的 CSS。
<style type=text/css">
/* the main css for the site */
.main-content {width:960px;}
/* the css adjustment for the site between two widths */
@media screen and (max-width:600px) and (min-width:271px) {
.main-content {width:100%;}
}
/* the css adjustment for the site with a max-width of 270px */
@media screen and (max-width:270px) {
.main-content {width:260px;}
}
</style>
回答by Kevin Lynch
This is how you would implement that scenarion
这就是你将如何实现该场景
<style>
// apply second set of CSS rules
@media (min-width: 270px) {
// apply first set of CSS rules
}
</style>
In this situation the CSS rules applied beforehand would get overwritten when the media query argument is met.
在这种情况下，当满足媒体查询参数时，预先应用的 CSS 规则将被覆盖。
