Что такое адаптивный дизайн?

Часть раздела Styling with CSS путешествия по HTML на Coddy — урок 61 из 76.

В веб-дизайне адаптивный дизайн — это подход, целью которого является создание веб-страниц, которые адаптируются и обеспечивают оптимальное качество просмотра на широком спектре устройств, от мониторов настольных компьютеров до мобильных телефонов. Адаптивный веб-сайт автоматически подстраивает свой макет, контент и функциональность в зависимости от размера экрана, разрешения и ориентации устройства, на котором он просматривается. Цель адаптивного дизайна — обеспечить пользователям удобный доступ к веб-сайту и взаимодействие с ним независимо от используемого ими устройства.

Адаптивный дизайн достигается за счет сочетания различных методов, включая:

Гибкие сетки и макеты: Использование CSS grid или Flexbox для создания макетов, которые могут адаптироваться к различным размерам экрана.

Гибкие изображения и медиа: Обеспечение пропорционального масштабирования изображений и других медиафайлов в соответствии с макетом.

Медиа-запросы: Применение различных стилей CSS в зависимости от характеристик устройства, таких как ширина, высота и ориентация экрана.

Поскольку все больше людей используют мобильные устройства для просмотра веб-страниц, адаптивный дизайн становится необходимым для того, чтобы сделать веб-сайты удобными в использовании. Он гарантирует, что ваш сайт будет хорошо выглядеть и исправно работать на любом устройстве, обеспечивая пользователям плавный и единообразный опыт.

Задание

Легко

Вам дан HTML-документ с заголовком (<h1>), абзацем (<p>) и двумя изображениями (<img>). Ваша задача — добавить базовый CSS, чтобы сделать элементы адаптивными и наглядно продемонстрировать разницу между фиксированной высотой и автоматической высотой. Выполните следующие шаги:

Напишите CSS-правило для элемента <h1>. Установите font-size в значение 5vw. Это сделает размер шрифта заголовка зависимым от ширины области просмотра (viewport).
Напишите CSS-правило для элемента <p>. Установите font-size в значение 3vw. Это сделает размер шрифта абзаца зависимым от ширины области просмотра.
Напишите CSS-правило для класса .fixed-height. Установите width в значение 100%, а height в значение 150px. Это создаст искаженное изображение, принудительно задав фиксированную высоту.
Напишите CSS-правило для класса .auto-height. Установите width в значение 100%, а height в значение auto. Это позволит изображению масштабироваться пропорционально, сохраняя соотношение сторон.
Напишите CSS-правила для контейнеров (.container), чтобы задать им width в значение 300px, border в значение 2px solid #ccc, margin в значение 20px и padding в значение 10px.

Шпаргалка

Адаптивный дизайн позволяет создавать веб-страницы, которые подстраиваются под различные устройства и размеры экранов благодаря гибким макетам, масштабируемым медиафайлам и медиа-запросам.

Основные методы адаптивного дизайна:

Гибкие сетки и макеты: использование CSS Grid или Flexbox
Гибкие изображения и медиа: пропорциональное масштабирование в зависимости от макета
Медиа-запросы: применение различных стилей на основе характеристик устройства

Используйте единицы измерения viewport для адаптивной типографики:

h1 {
  font-size: 5vw;
}

p {
  font-size: 3vw;
}

Сделайте изображения адаптивными с помощью правильного масштабирования:

/* Fixed height - causes distortion */
/* Фиксированная высота — вызывает искажение */
.fixed-height {
  width: 100%;
  height: 150px;
}

/* Auto height - maintains aspect ratio */
/* Автоматическая высота — сохраняет соотношение сторон */
.auto-height {
  width: 100%;
  height: auto;
}

Попробуйте сами

<html>
<head>
    <title>What is Responsive Design?</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>Mount Everest: The World's Highest Peak</h1>
    <p>Mount Everest, standing at 8,848.86 meters (29,031.7 feet), is the tallest mountain on Earth. Located in the Himalayas on the border between Nepal and Tibet, it attracts climbers from around the world. Scaling Everest is a challenging journey due to its extreme weather, thin air, and rough terrain.</p>
    
    <div class="container">
        <h3>Fixed Height (Distorted)</h3>
        <img class="fixed-height" src="https://upload.wikimedia.org/wikipedia/commons/e/e7/Everest_North_Face_toward_Base_Camp_Tibet_Luca_Galuzzi_2006.jpg" alt="Distorted Image">
    </div>
    
    <div class="container">
        <h3>Auto Height (Preserved Aspect Ratio)</h3>
        <img class="auto-height" src="https://upload.wikimedia.org/wikipedia/commons/e/e7/Everest_North_Face_toward_Base_Camp_Tibet_Luca_Galuzzi_2006.jpg" alt="Proper Ratio Image">
    </div>
</body>
</html>