媒体最小和最大只识别一个规则

Question

我尝试根据分辨率屏幕给出最小高度样式。 最小宽度：300px用于屏幕＆gt; 1500px，min-with：200px＆gt; 1200px，最小宽度：200px> 860px等所以我这样做：

dtype: DT_STRING

但仅使用第一条规则。

Answer 1

确保min-width用于最小目标屏幕尺寸，max-width用于最大。

@media (min-width:1500px) and (max-width:1800px)  {
  .dash .tarjet{
    min-height: 300px;
  }
}​
@media (min-width:1200px) and (max-width:1499px) {
  .dash .tarjet{
    min-height: 200px;
  }
}​
@media (max-width:1199px) and (min-width:860px) {
  .dash .tarjet{
    min-height: 150px;
  }
}​

Answer 2

max-width必须大于min-width

...
@media (max-width:1800px) and (min-width:1500px)  {
...
@media (max-width:1499px) and (min-width:1200px) {
...
@media (max-width:1199px) and (min-width:860px) {
...