Question

我的页面中有一张图片。我希望它在屏幕高度变化时具有不同的高度。我的代码就像这样

＆＃13;

@media (min-height:  600px) {

    .focuspoint {
        min-height: 385px !important;
    }
      .focuspoint img{
        min-height: 385px !important;
    }
}

@media (min-height: 700px) {

    .focuspoint {
        min-height: 490px !important;
    }
       .focuspoint img{
              min-height: 490px !important;

    }
}

@media  (min-height: 800px) {

    .focuspoint {
        min-height: 450px !important;
    }
      .focuspoint img{
        min-height: 450px !important;
    }
}


@media (min-height: 900px) {

    .focuspoint {
        min-height: 685px !important;
    }
      .focuspoint img{
        min-height: 685px !important;
    }
}

@media  (min-height: 1050px) {

    .focuspoint {
        min-height: 985px !important;
    }
      .focuspoint img{
      min-height: 985px !important;
    }
}


@media (min-height: 1200px) {

    .focuspoint {
        min-height: 985px !important;
    }
     .focuspoint img{
        min-height: 985px !important;
    }
}

＆＃13;

<li class="panel activePage">
  <div class="focuspoint"  style="width: 100%; height: 100%;">
    <img src="/media/41661/1600x1070.jpg" class="img-responsive" >
  </div>

</li>

＆＃13;

每件事看起来都没问题，但是当我测试时，媒体查询不是由浏览器拍摄的。任何人都可以指出我在这里做错了吗？

Answer 1

您需要撤消媒体查询的顺序，并同时添加＆＃34; min-height＆＃34;和＆＃34; max-height＆＃34;确保它正确呈现。

@media (min-height: 1200px) {

    .focuspoint {
        min-height: 985px !important;
    }
     .focuspoint img{
        min-height: 985px !important;
    }
}


@media  (min-height: 1050px) and (max-height: 1199px) {

    .focuspoint {
        min-height: 985px !important;
    }
      .focuspoint img{
      min-height: 985px !important;
    }
}

@media (min-height: 900px) and (max-height: 1049px) {

    .focuspoint {
        min-height: 685px !important;
    }
      .focuspoint img{
        min-height: 685px !important;
    }
}

@media  (min-height: 800px) and (max-height: 899px) {

    .focuspoint {
        min-height: 450px !important;
    }
      .focuspoint img{
        min-height: 450px !important;
    }
}

@media (min-height: 700px) and (max-height: 799px) {

    .focuspoint {
        min-height: 490px !important;
    }
       .focuspoint img{
              min-height: 490px !important;

    }
}


@media (min-height:  600px) and (max-height: 699px) {

    .focuspoint {
        min-height: 385px !important;
    }
      .focuspoint img{
        min-height: 385px !important;
    }
}

媒体查询不适用于最小高度

1 个答案: