Question

我希望div1仅在窗口宽度小于800px时出现，并且我希望div2仅在窗口宽度大于800px时出现。我的解决方案是使用以下CSS工作。但是，有没有办法只使用一个@media命令执行此操作？写两个条件似乎很笨，一个用于max-width，一个用于min-width。

@media screen and (max-width: 800px) {
  #div1 {
    display: block;
  }
  #div2 {
    display: none;
  }
}

@media screen and (min-width: 800px) {
  #div1 {
    display: none;
  }
  #div2 {
    display: block;
  }
}

<div id="div1">
  DIV1
</div>

<div id="div2">
  DIV2
</div>

Answer 1

选择其中一个媒体查询。

＆＃13;

#div1 {
  display: none;
}
#div2 {
  display: block;
}
@media screen and (max-width: 800px) {
  #div1 {
    display: block;
  }
  #div2 {
    display: none;
  }
}

＆＃13;

<div id="div1">
  DIV1
</div>
<div id="div2">
  DIV2
</div>

＆＃13;

或者

＆＃13;

#div1 {
  display: block;
}
#div2 {
  display: none;
}
@media screen and (min-width: 800px) {
  #div1 {
    display: none;
  }
  #div2 {
    display: block;
  }
}

＆＃13;

<div id="div1">
  DIV1
</div>
<div id="div2">
  DIV2
</div>

＆＃13;

Answer 2

有一种方法可以组合媒体查询尝试：

@media only screen and (max-width: 600px) and (min-width: 400px) {

上述查询仅针对600-400px宽的屏幕触发。这可用于定位具有已知宽度的特定设备。

或者，如果您只想定位800px或更低的屏幕尺寸，请使用：

@media screen and (max-width: 800px) {

Answer 3

replace @media screen and (max-width: 800px) { #div1 {
display: block;
}
#div2 {
display: none;
} }

with  #div1 {
display: block;
}
#div2 {
display: none;
}

结合最小宽度和最大宽度

3 个答案: