Странная логика медиа-запросов CSS - PullRequest
Новая
       7

Странная логика медиа-запросов CSS

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

Я работал над проектом и столкнулся с проблемой.Я покажу вам следующий демонстрационный пример:

Это код CSS: 

    *, *::after, *::before {
    box-sizing: border-box;
    margin: 0;
    border: 0;
}

@media only screen and (max-width: 600px) {
    div {
        background: blue;
    }
}


@media only screen and (min-width: 601px) and (max-width: 1000px)  {
    div {
        background: green;
    }
}


@media only screen and (min-width: 1001px) {
    div {
        background: red;
    }
}

Так что мой div должен быть:

  • синий от 0px до600px
  • зеленый от 601p до 1000px
  • красный от 1001px до ...

Вместо этого:

  • синий от 0pxдо 600px
  • белого цвета при 601px
  • зеленого цвета от 602px до 1000px
  • белого цвета при 1001px
  • красного цвета от 1002px до ...

Почему?Кажется, что (min-width:) не включено.

Итак, я попытался: 

    *, *::after, *::before {
    box-sizing: border-box;
    margin: 0;
    border: 0;
}

@media only screen and (max-width: 600px) {
    div {
        background: blue;
    }
}


@media only screen and (min-width: 600px) and (max-width: 1000px)  {
    div {
        background: green;
    }
}


@media only screen and (min-width: 1000px) {
    div {
        background: red;
    }
}

Так что мой div должен быть:

  • синий от 0px до 600px
  • зеленый с 601px до 1000px
  • красный с 1001px до ...

Вместо этого:

  • синий с 0px до 599px
  • зеленый с 600px до 999px
  • красный с 1000px до ...

Почему?Теперь кажется, что (min-width:) включительно.

Но если я попытаюсь: 

    *, *::after, *::before {
    box-sizing: border-box;
    margin: 0;
    border: 0;
}

@media only screen and (max-width: 601px) {
    div {
        background: blue;
    }
}


@media only screen and (min-width: 601px) and (max-width: 1001px)  {
    div {
        background: green;
    }
}


@media only screen and (min-width: 1001px) {
    div {
        background: red;
    }
}

Кажется, что (min-width:) снова не включается:

  • синего цвета отОт 0px до 601px
  • зеленый с 602px до 1001px
  • красный с 1002px до ...

Я в замешательстве.

1 Ответ

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

Оба префикса 'min' и 'max' включительно.Цитирование спецификация :

Большинство функций мультимедиа допускают использование дополнительных префиксов 'min-' или 'max-' для выражения "больше или равно" и "меньше или равно "ограничениям.

Проблема немного в другом: хотя вы ожидаете, что размеры в пикселях будут целочисленными, это не всегда так. Эта статья описывает проблему довольно подробно:

Вы можете подумать: «Полпикселя? Это невозможно», и для большинствачасть это не так.Но если вы используете Ctrl + или Ctrl- для изменения масштаба вашего браузера, то вы часто будете иметь нецелые размеры видового экрана, и этот нецелый размер видового экрана может использоваться браузером при определении, какие медиазапросы применить кстраница [...]

В Windows 7 и выше операционная система использует уровень масштабирования для таких вещей, как текст и значки, а на больших экранах (например, шириной 1920 пикселей) этот параметр будет установлен автоматическидо увеличения 125%.Но IE, Edge и Firefox все наследуют это 125% -ое значение по-своему и в итоге применяют его как масштабирование браузера, создавая условия для появления этой ошибки по умолчанию на большинстве компьютеров Windows с экранами приличного разрешения за последние пять или шесть лет..

Проверьте обсуждение, открытое по аналогичной проблеме в Bootstrap.Цитата:

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

Полагаю, довольно удобно.

Короче говоря, я бы здесь отбросил max-width или min-width и использовал бы перекрывающиеся правила, позволяя последнему правилу быть решающим.

...