Вопрос о медиа-адаптации CSS

Рейтинг: 0Ответов: 2Опубликовано: 25.08.2023

Для медиа-адаптации указывать нужно и ширину и высоту:

@media (orientation: portrait) and (max-width: 360px) and (max-height: 640px) {}  

или по отдельности? Просто, если указать все сразу, то будут слепые зоны. И могли бы Вы пожалуйста написать основные размеры для медиа-адаптации (от самых мелких дисплеев смартфонов (0-360) и до ультрашириков?

Ответы

▲ 0Принят

Смотрите на медиа запросы как на условия (по сути это они и есть).

@media (orientation: portrait) and (max-width: 360px) and (max-height: 640px)

Можно прочитать как: "портретный режим и экран не больше 360px по ширине и 640px по высоте".

Сразу скажу, что orietation вычисляется как раз по соотношению сторон, т.е. 360x640 - это будет portrait, а 640x360 уже landscape.

Конкретно в вашем условии есть ошибка: экран шире 360px, но меньше 640px по высоте, уже не попадает под данный запрос, чтобы попадал, следует перестроить условие вот так:

@media (orientation: portrait) and (max-width: 360px) or (max-height: 640px)

Тогда все экрана меньше 360px по ширине или 640px по высоте в портретном режиме будут попадать под условия.


...основные размеры для медиа-адаптации...

Они везде разные и зависят больше от дизайна.

Чаще всего я использую такие условия:

@media screen and (min-width: 1280px) {} /* ноутбук */
@media screen and (min-width: 1024px) {} /* планшет */
@media screen and (min-width: 768px)  {} /* мобилка */

В последнем проекте был адаптив только под мобилку и использовался только один медиа запрос:

@media screen and (max-width: 768px) and (orientation: portrait)

Там использовался "адаптивный пиксель", по этому этого хватало.

▲ 0

В media запросах можно указать и ширину и высоту или их же, но по отдельности, вас никто не ограничивает. Что касается размеров устройств, которые вы просите предоставить, то сам вопрос стоит не верно. При такой постановке вопроса можно сделать вывод, что вы поставили упор на media запросы, что не правильно, ведь чем их меньше, тем лучше.

Если нужны размеры популярных устройств, то можете открыть инспектор в консоли и нажать "показать или скрыть панель инструментов устройства" ну или как-то так. Там можно найти размеры всех популярных смартфонов и планшетов и при желании даже добавить свои. Ориентироваться нужно именно на это. В общем от 320px и выше