Как сделать сайт резиновым

Создание резинового сайта означает, что ваш сайт автоматически адаптируется к различным размерам экрана и разрешениям. В этой статье мы рассмотрим основные принципы создания резинового сайта и предоставим примеры кода для вашей практики.

Основные принципы резинового дизайна

1. Процентные значения 📏: Используйте проценты для задания ширины и высоты элементов, чтобы они автоматически масштабировались в зависимости от размера окна браузера.
2. Медиа-запросы 📱: Используйте медиа-запросы для определения различных стилей элементов в зависимости от разрешения экрана или других характеристик устройства.
3. Отзывчивые изображения 🌅: Используйте атрибут srcset и sizes для тега <img>, чтобы браузер автоматически загружал оптимальные версии изображений для разных размеров экрана.

Примеры кода

Процентные значения

Вместо использования фиксированных пикселей (px) для задания размеров элементов, используйте проценты (%). Вот пример использования процентов для задания ширины блока:

<div style="width: 80%; border: 1px solid black;">
  Этот блок будет занимать 80% ширины экрана.
</div>

Медиа-запросы

Медиа-запросы позволяют применять разные стили в зависимости от характеристик устройства. В этом примере мы задаем разные стили для блока в зависимости от ширины экрана:

.block {
  background-color: blue;
  width: 100%;
}

@media screen and (min-width: 768px) {
  .block {
    background-color: green;
    width: 50%;
  }
}

Отзывчивые изображения

Используйте атрибуты srcset и sizes для тега <img>, чтобы браузер автоматически выбирал оптимальное изображение для разных размеров экрана:

<img srcset="small.jpg 480w, medium.jpg 768w, large.jpg 1200w"
     sizes="(max-width: 480px) 480px, (max-width: 768px) 768px, 1200px"
     src="medium.jpg" alt="Отзывчивое изображение">

Теперь, когда вы знакомы с основными принципами создания резинового сайта, вы можете начать экспериментировать и улучшать адаптивность своего веб-проекта. Удачи вам в обучении и практике! 😉

Тест на профориентацию

За 10 минут узнайте, как ваш опыт пригодиться в IT индустрии

Подробнее