Адаптируем сайты с помощью медиа-запросов @media

Адаптация сайта под разные разрешения экрана max и min. Мы регулярно выпускаем такие полезные статьи. Подпишитесь на наш Телеграм-канал, там есть идеи, которые мы больше нигде не публикуем.

Задача

Адаптировать сайт под все устройства и под все разрешения. Сайт имеет одну версию, которая видоизменяется в зависимости от разрешения экрана.

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

Решение

Подключаем разные таблицы стилей CSS для разных разрешений экрана. Разрешения экрана ловим медиа-запросами @media.

Конструкция (пример)

@media screen and (min-device-width: 1600px) {

ваши стили CSS для этого разрешения

}

Теперь нужно просто указать все разрешения и предусмотреть возможные устройства для корректного отображения вашего сайта. Будем указывать возможные разрешения диапазонами, к примеру от 1024px до 1280px. Мы не затронем того, какие логические операторы используются в медиа-запросах. Подробная информация про них здесь.

Планшеты вертикально:

@media screen

and (orientation: portrait) and (device-width:768px) {

ваши стили CSS для этого разрешения

}

Телефоны вертикально:

@media screen

and (orientation: portrait) and (min-device-width : 320px) and (max-device-width : 700px) {

ваши стили CSS для этого разрешения

}

Планшеты горизонтально:

@media screen

and (min-width: 768px) and (max-width: 1024px)

ваши стили CSS для этого разрешения

}

Телефоны горизонтально:

@media screen

(max-width:640px) and (orientation:landscape)

ваши стили CSS для этого разрешения

}

Дипазон разрешения экрана:

@media screen

and (min-width:1024px) and (max-width:1279px)

ваши стили CSS для этого разрешения

}

Дипазон разрешения экрана:

@media screen

and (min-width:1280px) and (max-width:1365px)

ваши стили CSS для этого разрешения

}

Дипазон разрешения экрана:

@media screen

and (min-width:1366px) and (max-width:1439px)

ваши стили CSS для этого разрешения

}

Дипазон разрешения экрана:

@media screen

and (min-width:1440px) and (max-width:1599px)

ваши стили CSS для этого разрешения

}

Дипазон разрешения экрана:

@media screen

and (min-width:1600px) and (max-width:1919px)

ваши стили CSS для этого разрешения

}

Дипазон разрешения экрана:

@media screen

and (min-width:1920px) and (max-width:2559px)

ваши стили CSS для этого разрешения

}

Дипазон разрешения экрана:

@media screen

and (device-width:2560px)

ваши стили CSS для этого разрешения

}

Эти медиа-запросы позволяют перекрыть почти все устройства, что сегодня существуют. Появляется экзотика с разрешением в 4K и 5K. С ними нужно экспериментировать отдельно.