Некорректный медиазапрос применяется к элементам HTML - PullRequest
Новая
       7

Некорректный медиазапрос применяется к элементам HTML

0 голосов
/ 12 июня 2018

У меня есть класс, написанный для 2 наборов устройств (медиа-запрос) iphone 6/7/8 и iphone X.

атрибут класса похож на другой, за исключением измерения.

Сейчасздесь, если я написал медиа-запрос для iphone 6/7/8 первым и медиа-запрос iphone X последним, то медиа-запрос последующего применяется, и то же самое имеет место, если я переверну порядок этих медиа-запросов.детали: 

@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, в котором применяется то, что приходит последним, если другое не помечено как важное.Но здесь у меня есть "! Важно" в обоих медиа-запросов.Каким должно быть решение для этого?

JSFiddle: jsfiddle.net / 2cwwe0p4 / 20.

1 Ответ

0 голосов
/ 12 июня 2018

Как вы сказали, CSS работает сверху вниз, давая последним больше предпочтений, чем первым.Ваша проблема в том, что вам нужно переопределить некоторые стили (как я понял) для Iphone X (max-width: 812px).Решением может быть структурирование вашего CSS таким образом, чтобы все стили применялись для «экрана @media only и (min-width: 375px) и (max-width: 812px)» и должны быть записаны первыми в файле Css.Для остальных стилей, которые должны быть перезаписаны для iphone, 6/7/8 (max-width: 667px) должны быть написаны ниже в файле CSS (идея заключается в том, чтобы сделать код максимально универсальным и изменить стилидля Iphone 6/7/8 при достижении максимальной ширины: 667).

Подробнее см. https://jsfiddle.net/gmbqLk5c/40/.Подробности: я применил красную рамку к таблице в целом.Но когда max-width: 667px, я перезаписал цвет границы: синий.Отныне Iphone X будет отображать красную рамку, но под устройствами будет отображаться синяя рамка (без использования! Важное). 

<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>
...