Адаптивный дизайн может быть создан при помощи медиа-запросов CSS. Медиа-запросы дают возможность изменять стили на основе ширины экрана или других характеристик устройства, на котором просматривается сайт.
Пример медиазапроса для планшетной и мобильной версии:
@media (max-width: 768px) {
/* Стили для планшетной и мобильной версии */
}
В блоке стилей, который будет применяться при определенных условиях с помощью медиа-запросов, можно изменять размеры элементов, располагать их по другому, скрывать или отображать, изменять цвет, шрифты и многое другое.
Для создания адаптивного дизайна также полезно использовать относительные единицы измерения, такие как %, em, rem, vh, vw вместо фиксированных значений в пикселях. Это позволяет элементам гибко изменять свои размеры и пропорции при изменении размера экрана.
Пример использования относительных единиц измерения:
.container {
width: 80%;
margin: 0 auto;
font-size: 1.2em;
}
@media (max-width: 768px) {
.container {
width: 100%;
margin: 0;
font-size: 1em;
}
}
В данном примере блок .container будет занимать 80% ширины экрана на десктопе и 100% ширины на планшете и мобильном устройстве. Также размер шрифта будет уменьшаться на маленьких экранах.
Важно помнить, что адаптивный дизайн – это не просто изменение размеров и расположения элементов, но и оптимизация сайта для различных устройств и скорости интернета. Именно поэтому рекомендуется использовать компоненты и библиотеки для адаптивной верстки, такие как Bootstrap, Foundation, MaterializeCSS.
