Откат в медии на 1 пиксель — костыль?

Question

[Рома]

Работал в команде. Заметил что при создании адаптивов один парень вместо:

@media screen and (min-width: 768px) {};
/* tablet */
@media screen and (min-width: 1024px) {};
/* laptop */
@media screen and (min-width: 1440px) {};
/* for big screen */

Писал медию на один пиксель меньше. Тобеш 767, 1023, 1439. Под предлогом, что в коде были ошибки. Всю жизнь писал медию именно так, как в коде вверху и впервые слышу о том, что нужно делать в медии откат на один пиксель. Для меня это как написать width: 19px;

Уточнения я так и не получил. Так собственно нужен ли откат на один пиксель в медии?

Comments

[iBird Rose]

когда дойдешь до верстки на 4к мониках с масштабированием в ОС ты еще и сотые доли будешь писать) по типу min-width: 768.89px

[Рома]

Bruh. Какой в этом смысл?

[Ankhena]

Рома, он при этом писал min-width или max-width?

[Рома]

Ankhena, Всё для min-width

[Рома]

Ankhena, Mobile first у нас

Answer 1

[cssfish]

По идее диапазоны пишут так, чтобы не было перекрытия, т.е. если брейкпоинт на 768, то выделяем 2 диапазона:
1) 768+
2) 0 - 767

соответственно:

@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {}

Но тут есть нюанс, мы теряем пиксель между 767 и 768. В текущих реалиях, когда css и device pixels давно не равны, когда кругом все масштабируется ( и соответственно где-то внутри округляется) - все может быть. Поэтому дельту в пиксель уменьшают до 0.02px. Почему именно такая велична, сходу не нагуглю. Возможно , чисто эмпирическим путем выяснили что 0.01 не работает, например ))

похожая тема на стеке

upd:
а, ну вот там и ответ:

// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.
// See https://bugs.webkit.org/show_bug.cgi?id=178261

Comments

[Ankhena]

Почему именно такая велична, сходу не нагуглю.

Тут https://bootstrap-4.ru/docs/5.0/layout/breakpoints/

[cssfish]

Ankhena, да, точнее причина в округлении в вебките

[Рома]

Я из этого мало что понял, но спасибо

[cssfish]

Рома, а что именно неясно?

Попробую проще: раньше вместо нормальных операторов сравнения, которые ввели в Media Queries Level 4 (>, <, >=, <=) были только свойства "min-width" и "max-width", которые не дают разбить диапазон без зазоров.

Смотрите, вот так в Media Queries Level 4, "дыр" в диапазоне нет, 0.02px не нужны:

@media screen and (width >= 768px) {} //
@media screen and (width <  768px) {} //

Но пока этого нет, имеем "ничейный" зазор в 1px (между 767 и 768, сами значения не входят)

@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {}

или в 0.02px

@media screen and (min-width: 768px) {}
@media screen and (max-width: 767.98px) {}

Если расчетная шрина экрана попадет в этот зазор (767.5px или 767.99px соответственно), то никакие стили не применятся - не из первого диапазона, не из второго.

Но т.к. эта ситауция маловероятная (особенно с 0.02), то на это можно забить и ждать поддержки Media Queries Level 4

Хотя можно и не ждать, оно и так уже работает, жаль только не в safari и ios...