我将此表单放在页面的页脚中(只有一个文本框和一个按钮)。我想根据可用的视口宽度尝试将@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
?
答案 0 :(得分:41)
@media
没有if / else语法,因此您需要在两个单独的@media
规则中重复相同的媒体查询,并使用not
其中一个表示“其他” ”
在您的情况下,媒体查询将为all and (min-width: 270px)
。 (not
需要media type才能正常工作;默认为all
所以我只是使用它。)
您的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结构,那么你将不得不使用not
和一个重复的媒体查询。
答案 1 :(得分:3)
是。通常从主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>
答案 2 :(得分:0)
这就是你实现这个场景的方法
<style>
// apply second set of CSS rules
@media (min-width: 270px) {
// apply first set of CSS rules
}
</style>
在这种情况下,当满足媒体查询参数时,预先应用的CSS规则将被覆盖。