Media queries ведут себя как-то странно, почему так?

Question

[Владимир]

Друзья, почему медиа запросы ведут себя как-то странно, либо я чего-то недопонимаю. Помогите разобраться, пожалуйста!

ПЕРВАЯ ситуация следующая.

background-color: red;
@media (max-width: 1630px) {
    background-color: green;
}
@media (max-width: 1024px) {
    background-color: blue;
}
@media (max-width: 992px) {
    background-color: yellow;
}
@media (max-width: 768px) {
    background-color: aqua;
}

Проблема в том, что background-color: green применяется на 1629px, хотя ведь ДОЛЖЕН 1630px. ПОЧЕМУ ТАК?? Ведь ОСТАЛЬНЫЕ применяются КАК И ПОЛОЖЕНО, т.е. background-color: blue применяется на 1024px, а не на 1023px и остальные, которые меньше тоже применяются на указанных брекпоинтах, а не ниже на 1px.
Почему какие-то брекпоинты применяются как и указано, а какие-то применяются когда окно меньше на 1px указанного?

ВТОРАЯ ситуация следующая.

background-color: red;
@media (max-width: 1629px) {
    background-color: green;
}
@media (max-width: 1023px) {
    background-color: blue;
}
@media (max-width: 991px) {
    background-color: yellow;
}
@media (max-width: 767px) {
    background-color: aqua;
}

Тут происходит следующее:
media (max-width: 1629px) применяется на 1628px,
media (max-width: 1023px) применяется на 1022px,
media (max-width: 991px) применяется на 990px и т.д.
т.е. теперь КАЖДЫЙ брекпоинт применяется на 1px меньше указанного.

Все становится еще интересней. Допустим, я хочу чтобы положенный брекпоинт media (max-width: 1023px) применился именно на 1023px, и раз он срабатывает на 1px ниже указанного, то логично, что можно добавить +1px и он применится как и задумано, пробуем:

@media (max-width: 1024px) {
    background-color: blue;
}

и тут, ВНИМАНИЕ, он начинает применяться уже именно на 1024px, а не меньше на 1px. ЧТО???

Что вообще происходит и почему так? Как с этим бороться?
Буду очень благодарен за ответ!!!

Comments

[Ankhena]

Открываете инспектор кода, вкладку Computed и всё всё там смотрите.
Либо выкладывайте конкретный пример.
Потому что откуда тут взялось 1310 вообще не ясно

Проблема в том, что background-color: green применяется на 1629px, хотя ведь ДОЛЖЕН 1310px. ПОЧЕМУ ТАК??

[Nebritbij]

Браузер сам считает как ему нравиться) в разных браузерах это еще и по разному может происходить. А бороться либо сидеть и долго подбирать значения, что бы во всех браузерах одинаково было, либо принять это и немного повысить значения, что б запас был.

[Владимир]

Ankhena, Извиняюсь, это я ошибся, вместо 1310px должно быть 1630px.

[Ankhena]

Владимир, да все равно, хорошо бы полную картину происходящего.
Проверяйте масштаб и другие стили и media условия.
В инспекторе все отлично будет видно (скин это не от вашего примера)

[Владимир]

Ankhena, Да, все верно, нужно Computed смотреть (правда упустил этот момент, спасибо Вам).
Проблема в том, что когда масштаб браузера отличен от 100% образовывается зазор про который сказал Павел Грузных в ответе ниже. Именно на брейкпоинте 1630px у меня масштаб уменьшается, т.к. монитор не большой и образовывается зазор. На остальных же брейкпонтах масштаб 100% поэтому все отлично.

[Владимир]

Ankhena, Раньше просто такой проблемы не было, т.к. работал за большим монитором и всё работало как и надо.
Сейчас же монитор не большой (ноутбук), поэтому и столкнулся с такой проблемой, которая, на первый взгляд, может показаться глупой, особенно учитываю, что я не первый год работаю и всегда читаю документацию, но в спецификации не было ни слова про масштаб браузера и зазор.

Answer 1

[Павел Грузных]

В интернетах ходят байки про образование зазора 1px между брейкпойнтами, в случае, если для данной ширины экрана применяются одновременно правила max-width и min-width и при отличном от 100% масштабировании экрана браузера. Проверь, нет ли у тебя аналогичной ситуации. Решение проблемы - по той же ссылке.

Comments

[Владимир]

Да, у меня на брейкпоинте 1630px походу проблема именно из-за того, что масштаб экрана меньше 100% и поэтому приходится масштабировать. т.к. на других брейкпоинтах такого не наблюдается из-за того, что масштаб экрана 100%

[Владимир]

Вот и показалась проблема, про которую Вы сказали. Действительно дело в масштабе отличном от 100%


Спасибо большое за ответ!

[Владимир]

Павел, скажите еще пожалуйста, а если действительно указывать дробные значения, как в приведенной статье в комментариях, например media (max-width: 1630.9px) { //css code here }, не вызовет ли это проблем в каких-либо браузерах, например отказ вообще воспринимать такие запросы?

[Павел Грузных]

Владимир, мне не доводилось применять в верстке дробные значения размеров в px, я вообще предпочитаю использовать относительные величины - em, например. Там можно применять сколь угодно дробные значения для наиболее точной подгонки.

Но думаю, стоит попробовать. Я не нашел в стандартах четкого упоминания, что у размеров в px обязательно должно быть целое значение. Браузеры ориентируются на стандарты, поэтому, предполагаю, что и обрабатывать такие значения они будут корректно и единообразно, по стандартам.