我将此表单放在页面的页脚(只有一个文本框和一个按钮)。我想尝试应用@media到它，基于视口宽度可用…所以例如，在我的情况下，这个表单的宽度需要它约270px左右。所以我想应用CSS来说：
if the width available is at least 270px
apply first set of CSS rules
else
apply second set of CSS rules
如何使用@media？
解决方法
对于@media，没有if / else语法，所以您需要在两个独立的@media规则中重复相同的媒体查询，并不使用其中的一个来表示“else”。
在你的情况下，媒体查询将是全部和(最小宽度：270px)。 (你需要一个media type不工作;默认是所有，所以我只是使用它。)
你的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 */
}
我应该补充说，一种流行的方式是通过仅使用一个@media规则来覆盖样式来使用级联：
/* Apply second set of CSS rules */
@media all and (min-width: 270px) {
/* Apply first set of CSS rules */
}
但是，如果您在@media规则之外有任何不会(或不能被覆盖)内的任何样式，那么这种情况就会很短。那些风格将继续适用，而且你无法解除实际重新声明的风格。有时您无法通过重新声明它们来撤消它们，而当您无法使用此方法应用样式时。看到我的答案this question详细的解释。
在这个例子中，height：200px声明将始终适用：
.example {
width: 200px;
height: 200px;
}
@media all and (min-width: 270px) {
.example {
width: 400px;
}
}
当然，如果这不是问题，那么你可以使用这个来避免重复媒体查询。但是，如果你正在寻找一个严格的if / else结构，那么你将不得不使用和重复的媒体查询。
