Основы Media Queries

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

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

Базовый синтаксис медиа-запросов:

@media (condition) {  
    selector {  
        property: value;  
    }  
}

condition: Правило, которое активирует стили (например, max-width: 600px).
selector: HTML-элемент(ы), к которым применяются стили.

свойство: CSS-свойство, которое нужно установить (например, width, font-size).
значение: Значение, присваиваемое свойству, которое изменяется в зависимости от условия медиа-запроса.

В медиа-запросе условие может основываться на различных факторах, таких как размер экрана, разрешение и многое другое. Некоторые распространенные условия включают:

max-width: Ограничивает стили экранами с максимальной шириной (например, max-width: 600px).
min-width: Применяет стили к экранам с минимальной шириной (например, min-width: 768px).

max-height: Ограничивает стили экранами с максимальной высотой (например, max-height: 400px).
min-height: Применяет стили к экранам с минимальной высотой (например, min-height: 500px).

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

Пример:

@media (max-width: 600px) {  
  body { background-color: lightblue; }  
}

@media (min-width: 601px) and (max-width: 1024px) {
  body {background-color: lightgreen;}

Это изменяет цвет фона на светло-голубой, когда ширина экрана составляет 600px или меньше. Для экранов шириной от 601px до 1024px цвет фона будет светло-зеленым.

Задание

Легко

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

Добавьте медиа-запрос @media для экранов с максимальной шириной 600px:
- Установите цвет фона (background color) для body в "lightblue".
- Установите размер шрифта заголовка (<h1>) равным 5vw (5% от ширины области просмотра).
Добавьте медиа-запрос @media для экранов с минимальной шириной 601px и максимальной шириной 1024px:
- Установите цвет фона (background color) для body в "lightgreen".
- Установите размер шрифта заголовка (<h1>) равным 3vw (3% от ширины области просмотра).

Изменяйте размер окна браузера, чтобы увидеть, как медиа-запросы динамически изменяют макет.

Шпаргалка

Медиа-запрос (media query) в CSS позволяет веб-сайту адаптироваться к различным размерам экрана, применяя стили на основе ширины, высоты устройства или других свойств.

Базовый синтаксис:

@media (condition) {  
    selector {  
        property: value;  
    }  
}

Общие условия:

max-width: Ограничивает применение стилей экранами с максимальной шириной
min-width: Применяет стили к экранам с минимальной шириной
max-height: Ограничивает применение стилей экранами с максимальной высотой
min-height: Применяет стили к экранам с минимальной высотой

Пример:

@media (max-width: 600px) {  
  body { background-color: lightblue; }  
}

@media (min-width: 601px) and (max-width: 1024px) {
  body {background-color: lightgreen;}
}

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

<html>
<head>
    <title>Media Queries Basics</title>
    <!--Напишите свой код здесь-->
    <style>
        
        
    </style>
</head>
<body>
    <h1>Whales: The Ocean Giants</h1>  
    <p>Whales are magnificent giants of the sea, famous for their intelligence and powerful songs. These gentle creatures face threats like hunting and pollution, making them vital to protect.</p>  
    <div>As ocean's true giants, whales help maintain the delicate balance of marine life.</div>  
</body>
</html>