Question

我有一套为2套设备（媒体查询）iphone 6/7/8和iphone X编写的课程。

除了测量之外，类的属性是相似的。

现在，如果我先写了iphone 6/7/8的媒体查询和iphone X的媒体查询，那么后面的媒体查询适用，如果我颠倒那些媒体的顺序就是这种情况query.Below是细节：

@media only screen and (min-width: 375px) and (max-width: 812px) {
    .datepicker.dropdown-menu{
        width: 312px !important;
        /* font-family: "Avenir_Book" !important; */
        height:319px !important;
        box-shadow:none !important;
        top:305px !important;
        border-radius:16px !important;
        padding:0px 0px 0px 0px !important;
    }

    .table-condensed {
        width: 310px !important;
    height:294px !important;
    }

    .datepicker table tr td {
        width: 30px !important;
    }

    .table-condensed tr {
        width: 255px !important;
        height: 39px;
    }

    .datepicker-days table thead {
        width: 260px !important;
    }

    .datepicker-days table tbody {
        width: 210px !important;
    }
}
@media only screen and (min-width: 375px) and (max-width: 667px)  {
    .datepicker.dropdown-menu{
        width: 310px !important;
        /* font-family: "Avenir_Book" !important; */
        height:319px !important;
        box-shadow:none !important;
        top:160px !important;
        border-radius:16px !important;
        padding:0px 0px 0px 0px !important;
    }

    .table-condensed {
        width: 308px !important;
    height:294px !important;
    }

    .datepicker table tr td {
        width: 30px !important;
    }

    .table-condensed tr {
        width: 255px !important;
        height: 39px;
    }

    .datepicker-days table thead {
        width: 260px !important;
    }

    .datepicker-days table tbody {
        width: 210px !important;
    }
}

我理解它的CSS的通用规则，其中最后一个将被应用，除非另一个被标记为重要。但在这里，我有重要的＆＃34;在两个媒体查询。应该解决这个问题的方法是什么？

JSFiddle：jsfiddle.net/2cwwe0p4/20.

Answer 1

正如你所说，CSS以一种从上到下的方式工作，比以前更优先。你的问题是你需要为Iphone X（最大宽度：812px）覆盖一些样式（我已经理解）。解决方案可能是以所有样式应用于“@media only screen and（min-width：375px）and（max-width：812px）”的方式构建CSS，并且应首先在Css文件中编写。对于iphone 6/7/8（最大宽度：667px）需要覆盖的其他样式应该在CSS文件中写下面（想法尽可能使代码通用，并且更改当达到最大宽度：667时，Iphone 6/7/8的样式。

有关详细信息，请参阅https://jsfiddle.net/gmbqLk5c/40/小提琴。细节是我一般将红色边框应用于表格。但是当max-width：667px时，我覆盖了边框颜色：蓝色。此后，Iphone X将显示红色边框，但下面的设备将显示蓝色边框（不使用！important）。

<div class="container datepicker">
  <table class="mt-2 table table-condensed">
    <tbody>
      <tr>
        <td>
          Sweden
        </td>
        <td>
          13:00
        </td>
         <td>
         South Korea
        </td>
      </tr>
      <tr>
        <td>
          Bolivia
        </td>
        <td>
          16:00
        </td>
         <td>
         Guam
        </td>
      </tr>
         <tr>
        <td>
          is
        </td>
        <td>
          23:00
        </td>
         <td>
         Hell
        </td>
      </tr>
    </tbody>

  </table>



</div>
<style>
@media only screen and (min-width: 375px) and (max-width: 812px) {

    .datepicker table tr td {
        border: solid 1px red;
     }
}
@media only screen and (min-width: 375px) and (max-width: 667px)  {

    .datepicker table tr td {
        border: solid 1px blue;
    }
}
</style>

不正确的媒体查询应用于html元素

1 个答案: