Для создания адаптивного дизайна сайта с помощью CSS необходимо использовать медиа-запросы. Медиа-запросы позволяют изменять стили элементов в зависимости от размера экрана устройства, на котором отображается сайт.
Пример использования медиа-запросов:
/* стили для экранов шириной менее 768px */
@media screen and (max-width: 767px) {
/* изменяем размер шрифта */
body {
font-size: 14px;
}
/* скрываем некоторые элементы */
.sidebar {
display: none;
}
}
/* стили для экранов шириной более 768px */
@media screen and (min-width: 768px) {
/* изменяем размер шрифта */
body {
font-size: 16px;
}
/* показываем скрытые элементы */
.sidebar {
display: block;
}
}
В данном примере мы используем медиа-запросы для изменения размера шрифта и скрытия/отображения элементов в зависимости от ширины экрана устройства. Эти стили будут применяться только на устройствах с шириной экрана менее 768px и более 768px соответственно.
Также можно использовать относительные единицы измерения, такие как проценты или em, чтобы элементы сайта масштабировались пропорционально размеру экрана. Например:
/* задаем ширину блока в 50% от ширины экрана */
.container {
width: 50%;
}
/* задаем размер шрифта в em */
h1 {
font-size: 2em;
}
Таким образом, при изменении размера экрана устройства, элементы сайта будут масштабироваться пропорционально и сохранять свой вид и функциональность.