Основы медиазапросов

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

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

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

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

условие: Правило, которое включает стили (например, max-width: 600px).
селектор: 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;}

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

Задание

Легко

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

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

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

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

<html>
<head>
    <title>Media Queries Basics</title>
    <style>
    /* Write your code here */
        
    </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>