Адаптивный веб-сайт корректно отображается на устройствах с различными разрешениями экрана, от больших мониторов до мобильных телефонов.
Проблема неадаптивного дизайна
На больших экранах сайт может выглядеть хорошо, но при уменьшении размера (например, на мобильном телефоне) размещение элементов нарушается. Текст переполняет блоки, изображения искажаются, ухудшая общее впечатление. Это типичная проблема неадаптивного дизайна.
Решение: CSS3 Media Queries
CSS3 предлагает мощный инструмент для решения этой проблемы — @media запросы. Они позволяют задавать различные стили в зависимости от характеристик устройства, например, размера экрана.
Практическое применение Media Queries: адаптация блоков статей
На больших экранах статьи отображаются в три колонки. На меньших экранах — по одной в строке. Для этого используем селектор article и @media запрос:
@media (min-width: 700px) {
article {
width: 96%; /* Ширина статьи */
min-height: auto; /* Убираем минимальную высоту */
margin: 10px; /* Отступы */
}
}
@media (max-width: 699px) {
article {
width: 98%; /* Ширина статьи */
/* Другие стили для экранов меньше 700px */
}
}- @media (min-width: 700px) задает стили для экранов шириной 700 пикселей и больше.
- @media (max-width: 699px) задает стили для экранов шириной 699 пикселей и меньше.
Внутри каждого блока @media заданы стили для элемента article. Ширина и отступы меняются в зависимости от размера экрана. Общие стили, не зависящие от размера экрана, лучше вынести за пределы блоков @media.
Более сложные Media Queries
Помимо min-width и max-width, @media запросы поддерживают другие параметры, например, для задания стилей для экранов с определенной ориентацией (landscape или portrait).
Например, для экранов шириной от 700 до 900 пикселей:
@media (min-width: 700px) and (max-width: 900px) {
article {
width: 80%;
margin-left: 10%;
margin-right: 10%;
}
}Этот пример демонстрирует изменение ширины статьи и отступов для конкретного диапазона размеров экрана.
Альтернативные подходы
Существуют и другие способы создания адаптивных сайтов:
- Отдельные мобильные версии: использование поддоменов (например, m.example.com).
- Респонсивный дизайн: использование CSS фреймворков, таких как Bootstrap.
@media запросы в CSS3 — мощный инструмент для создания адаптивных веб-сайтов, обеспечивающий удобный пользовательский опыт на любых устройствах. Экспериментируя с различными значениями и комбинациями условий, можно добиться оптимального отображения сайта на разных экранах.