Основы Media Queries

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

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

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

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

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

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

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

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;}

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

Задание

Легко

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

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

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

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

<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>