Медіа-запити

Медіа-запити змінюють розмір шрифту, розташування та розміри елементів залежно від ширини вікна.

Медіа-запити розміщуються в таблиці стилів і мають таку структуру:

Список основних типів:

screen — найпоширеніший тип. Для всіх пристроїв із екранами.
handheld — для телефонів, кишенькових комп’ютерів та інших невеликих пристроїв.
print — для принтерів.

Для ширини вікна від 768 до 1200 пікселів застосовується стандартне форматування.

А для інших розмірів додамо три медіа-запити.

1. Для ширини вікна більше ніж 1200 пікселів

Запит, який при ширині екрану понад 1200 пікселів виконує такі зміни:

Шрифт на всій сторінці — Comic Sans MS
Розмір шрифту — 150% від базового, колір — білий
Фон у блоці other — зображення fon.gif

Запит має вигляд:

У заголовку після @media записано умову, за якої застосовується це форматування — ширина екрану (screen) більша або дорівнює 1200 пікселів.

Результат при широкому екрані:

2. Для ширини вікна менше ніж 400 пікселів

Створимо запит, який при ширині екрану менше ніж 400 пікселів виконує такі зміни:

Розмір шрифтів — 70% від базового
Для блоків main та other знімається обтікання та встановлюється ширина 100%. Тепер блоки розташовуються в один стовпчик.
Для блоку main знімається фонове зображення
На всій сторінці шрифт — Calibri, колір — темно-зелений
Абзаци — курсивом
Заголовки — без курсиву

Запит має вигляд:

Результат при вузькому екрані:

3. Для ширини вікна від 400 до 768 пікселів

Створимо запит, який при ширині екрану меншій ніж 768, але більшій ніж 400 пікселів виконує такі зміни:

Розмір шрифту — 85% від базового
На всій сторінці шрифт — Calibri, колір — темно-синій

Запит має вигляд:

У заголовку після @media зазначено умову, за якої застосовується це форматування: ширина від 400 до 768 пікселів.

Результат:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <title>Сторінка про Реріхів</title>
  <style type="text/css">
    html { font-size: 80%; } /* Браузерне значення за замовчуванням (16px) */
    body {background-color: #DCDBD9;}
    h1 { font-style: italic; text-align:center; }
    p {text-align:justify;padding:1%;}
    img{width:60%;}
    .main { float:left; width:45%; color:white;
            background: url("fon2.jpg");}
    .other { float:left; width:55%; color:navy; }

    @media screen and (max-width: 400px) {
        html {
            font-size: 70%;
        }
        .main, .other {
            float: none;
            width: 100%;
        }
        .main,.other {
            background: none;
        }
        p, h1 {
            color: darkgreen;
            font-family: Calibri;
        }
        p {
            font-style: italic;
        }
        h1 {
            font-style: normal;
        }
    }
    @media screen and (min-width: 400px) and (max-width: 768px) {
        html {
            font-size: 85%;
        }
        p, h1 {
            font-family: Calibri;
            color: navy;
        }
        .main {  color:white;
                background: url("backgr.jpg");}
    }
    @media screen and (min-width: 768px) {
        .main { 
               float:left; width:45%; color:white;
                background: url("fon2.jpg");
              }
        .other { float:left; width:55%; color:navy;
                 background:url("fon.gif"); }
    }
  </style>
</head>
<body>
<h1>Микола Костянтинович, Олена Іванівна, їхні сини – Юрій Миколайович і Святослав Миколайович...</h1>

<div class="main"><h1><img src="1.png"></h1><p>Кожен із них вніс свій безцінний внесок у збагачення російської та світової культури. Але оцінювати всю масштабність діяльності всіх членів родини Реріхів можна лише як єдине духовне та творче явище, у якому гармонійно поєдналися різні грані їхньої спадщини.</p>
<p>Пройшовши шляхами героїзму, самопожертви та служіння ідеалам Великого Плану, Реріхи залишили людству невичерпне джерело мудрості, краси та знань. Їхня спадщина – це великий синтез науки, мистецтва та релігії, що розкриває людині шлях до духовного вдосконалення.</p>
</div>
<div class="other">
<p>У перші роки радянської влади Реріхи організували експедиції в Індію, Тибет та Центральну Азію, під час яких були зібрані унікальні матеріали про природу, мистецтво, релігію, історію та етнографію народів цих країн..</p>
<p>Багато років свого життя вони присвятили пошукам священної країни Шамбали. За переказами, вона розташована десь у горах Центральної Азії, у недоступному для звичайних людей місці, де живуть Великі Вчителі людства. На думку Миколи та Олени Реріхів, Шамбала – це не лише легенда, а й духовна реальність, що має велике значення для всього людства.</p>
<h1><img src="2.png"></h1></div>
</body>
</html>

Адаптивна верстка на Flex CSS

Приклад з Flex-розміткою

При зменшенні ширини екрану колонки з текстом витягуються вертикально, не змінюючи кількості колонок.

На маленьких екранах, при максимальній ширині 600 пікселів, слід залишити лише одну колонку — достатньо прописати медіа-запит із flex-flow: column nowrap;

Створимо запит, який при ширині екрану меншій ніж 600 пікселів виконує такі зміни:

Назад Вперед Зміст