@media не работает с шириной менее 1024 пикселей - PullRequest
Новая
       17

@media не работает с шириной менее 1024 пикселей

0 голосов
/ 13 января 2019

У меня есть сетка flex-box из divs. Я хочу изменить ширину этого div (в%) в зависимости от размера экрана.

Мой scss @media: 

   @media (max-width: 1023.9px) {
      width: 33.3333%;
    }

    @media (max-width: 768px) {
      width: 50%;
    }

    @media (max-width: 599px) {
      width: 100%;
    }

    @media (min-width: 1024px) {
      width: 25%;
    }

Но когда я протестировал это в инструменте Chrome Responsive, я получил только это:

Чехол шириной 500px, не изменяется,

screenshot Когда я меняю размер экрана на 1020, все нормально, max-width: 1023.9px работает. 1200 в порядке, min-width: 1024px работает. Но меньше 1024 - я получаю такие странные вещи. Что я делаю не так?

Сгенерированный CSS для моего класса сетки: 

.image-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  background-color: #f6f6f6; }
  .image-grid .image-wrapper {
    width: 25%;
    position: relative; }
    .image-grid .image-wrapper::before {
      display: block;
      content: '';
      width: 100%;
      padding-top: 88.23529%; }
    @media (max-width: 1023.9px) {
      .image-grid .image-wrapper {
        width: 33.3333%; } }
    @media (max-width: 768px) {
      .image-grid .image-wrapper {
        width: 50%; } }
    @media (max-width: 599px) {
      .image-grid .image-wrapper {
        width: 100%; } }
    @media (min-width: 1024px) {
      .image-grid .image-wrapper {
        width: 25%; } }

Хм, теперь все работает нормально, когда я изменяю размер окна браузера, я обычно получаю 1 столбец с 550px и 2 столбца с 700px. На вопрос дан ответ, но в «Отзывчивом» инструменте 550px и 700px все еще не работают. Может быть, я не понимаю инструмент.

Наконец-то решено. Проблема была совершенно тупой: я забыл добавить тег meta, поэтому инструмент Responsive не работал должным образом. Не забывайте об этой важной линии. <meta name="viewport" content="width=device-width, initial-scale=1.0">

Ответы [ 2 ]

0 голосов
/ 13 января 2019

Каждое правило в CSS может переопределить любое предыдущее правило для того же селектора. Так что вам просто нужно переключить код, чтобы он заработал: 

@media (max-width: 1023.9px) {
  width: 33.3333%;
}

// experimental
@media (max-width: 1000px) {
  width: 50%;
}

@media (max-width: 768px) {
  width: 50%;
}

@media (max-width: 599px) {
  width: 100%;
}

//
@media (min-width: 1024px) {
  width: 25%;
}

Причина, по которой ваши правила переопределяют друг друга, заключается в том, что все они имеют один и тот же селектор, и хотя max-width: 599px является точным и правильным, позднее появляется max-width: 1023.9px, и поэтому он переопределяет предыдущий width: 100%; из max-width: 599px медиазапрос.

И примечание: используйте целочисленные значения только для медиа-запросов. В мире нет экрана с .9 или даже .5 пикселями.

0 голосов
/ 13 января 2019

CSS является аббревиатурой от Cascade Style Sheet.

Это означает, что правила соответствуют каскадным образом. Если ширина области просмотра находится в диапазоне от 1000 до 1024, то последнее соответствует 33,3333%, и оно будет применено, переопределяя все предыдущие.

Как только вы это знаете, вы можете изменить свой код надлежащим образом. Если вы не хотите переосмысливать свой код, вы можете предотвратить переопределение с помощью !important. 

@media (max-width: 1000px) {
  width: 50% !important;
}

Предупреждение: использование !important - это плохая практика, причина здесь

...