我将此表单放在页面的页脚（只有一个文本框和一个按钮）。我想根据可用的视口宽度，尝试将@media应用于它。。。例如，在我的例子中，这个表单的全宽大约需要270px。所以我想用CSS来表示：
如果可用宽度至少为270px
应用第一组CSS规则
其他的
应用第二组CSS规则
如何使用@media
@media没有if/else语法，因此您需要在两个单独的@media规则中重复相同的媒体查询，并使用not使其中一个表示“else”
在您的情况下，媒体查询将是all和（最小宽度：270px）。（您需要为not设置一个媒体类型才能工作；默认值为all，所以我只使用它。）
您的CSS将如下所示：
@media all and（最小宽度：270px）{
/*应用第一组CSS规则*/
}
@介质并非全部和（最小宽度：270px）{
/*应用第二组CSS规则*/
}
我应该补充一点，一种流行的方法是通过使用一个覆盖样式的@media规则来利用级联：
/*应用第二组css规则*/
@介质和全部（最小宽度：270px）{
/*应用第一组CSS规则*/
}
但是，如果在@media规则之外有任何样式在其内部未被覆盖（或无法被覆盖），则这是不够的。这些样式将继续应用，除非真正重新定义它们，否则无法撤消它们。有时，您无法通过重新声明它们来撤消它们，此时您无法使用此方法应用样式。有关详细的解释，请参见我对这个问题的回答
在本例中，height:200px声明将始终应用：
。示例{
宽度：200px；
高度：200px；
}
@介质和全部（最小宽度：270px）{
.举例{
宽度：400px；
}
}
当然，如果这不是问题，那么您可以使用它来避免重复媒体查询。但是，如果要寻找严格的if/else构造，则必须使用not和重复的媒体查询