CSS-медиазапросы без min- и max-. Как работает новый синтаксис и стоит ли переходить?

[ilekarev]

Избежание «щелей» между брейкпоинтами

Чтобы избежать щели, можно так (для полноты):

@media (min-width: 320px) {}
@media not (min-width: 320px) {}

[niktariy]

Рада, что напомнил!

not действительно бывает полезен, когда нужно инверсировать условие, но в адаптивной вёрстке лучше применять его с осторожностью. Особенно если в блоке меняются display, font-size, gap - скачки почти неизбежны.

Пример в статье скорее теоретический (про «всё, что до 320px»), на практике куда полезнее показать *-only диапазоны.

Например, в Bootstrap:

/* sm-only: от 576px до 767.98px */
@media (min-width: 576px) and (max-width: 767.98px) { }

/* md-only: от 768px до 991.98px */
@media (min-width: 768px) and (max-width: 991.98px) { }

/* lg-only: от 992px до 1199.98px */
@media (min-width: 992px) and (max-width: 1199.98px) { }

В таком случае мы могли бы написать:

/* sm-only: ширина 576–767.99px */
@media (width >= 576px) and (width < 768px) { }

/* md-only: ширина 768–991.99px */
@media (width >= 768px) and (width < 992px) { }

/* lg-only: ширина 992–1199.99px */
@media (width >= 992px) and (width < 1200px) { }

[Bigata]

Долго ж рожали... Наконец-то сделали

[orlovec]

Самое полезное, что я прочитал по фронтенду за последний месяц на хабре. Спасибо.