Медіа-запити зазвичай використовуються в адаптивному дизайні для відображення різних макетів на різних пристроях залежно від розміру екрана. Для цього є причина — деякі макети завжди будуть виглядати занадто сплющеними (або повністю розламаються) при перегляді на вузьких екранах.
Наприклад, ви можете використовувати медіа-запити для відображення першого макета на широких екранах (настільні комп'ютери, ноутбуки та ін), другого макета на екранах середнього розміру (планшети, великі телефони) та третього макета на вузьких екранах (мобільні телефони та ін.). Тут ми візьмемо створений нами раніше макет і додамо до нього медіа.-запит, щоб він відображався по-іншому на невеликих пристроях.
<!doctype html>
<title>Приклад</title> <style> * { box-sizing: border-box; }
body { display: flex; min-height: 100vh; flex-direction: column; margin: 0; }
#main { display: flex; flex: 1; }
#main > article { flex: 1; }
#main > nav, #main > aside { flex: 0 0 20vw; background: beige; }
#main > nav { order:-1; }
header, footer { background: yellowgreen; height: 20vh; }
header, footer, article, nav, aside { padding: 1em; }
@media screen and (max-width: 575px) { #main { display: block; }
}
</style>
<body> <header>Шапка</header> <div id="main"> <article>Стаття</article> <nav>Навігація</nav> <aside>Бічна панель</aside>
</div> <footer>Підвал</footer>
</body> 
У цьому прикладі всі елементи повинні бути розташовані один під одним. Якщо ні, то ви, мабуть, дивитеся на широкому екрані. У цьому випадку зменшіть розмір вікна браузера, доки не побачите згорнутий макет.
У будь-якому випадку ось що ми додали в код.
<code data-language="css">@media screen and (max-width: 575px) { #main { display: block; }
}Все, що ми тут зробили, це змінили display: flex на display: block для елемента #main, щоб його дочірні елементи перестали бути флекс-елементами. Це призводить до того, що вони накладаються один на одного у початковому порядку. Але що, якщо ми не бажаємо, щоб елементи відображалися у початковому порядку? Якщо ми хочемо, щоб навігаційна панель постала перед статтею? У цьому випадку ми можемо внести такі самі прості зміни.
<!doctype html>
<title>Приклад</title> <style> * { box-sizing: border-box; }
body { display: flex; min-height: 100vh; flex-direction: column; margin: 0; }
#main { display: flex; flex: 1; }
#main > article { flex: 1; }
#main > nav, #main > aside { flex: 0 0 20vw; background: beige; }
#main > nav { order:-1; }
header, footer { background: yellowgreen; height: 20vh; }
header, footer, article, nav, aside { padding: 1em; }
@media screen and (max-width: 575px) { #main { flex-direction: column; }
}
</style>
<body> <header>Шапка</header> <div id="main"> <article>Стаття</article> <nav>Навігація</nav> <aside>Бічна панель</aside>
</div> <footer>Підвал</footer>
</body> 
Ось що ми зробили натомість.
<code data-language="css">@media screen and (max-width: 575px) { #main { flex-direction: column; }
}Отже, тепер у нас йде навігаційна панель, стаття, потім бічна панель. Але зауважте, що навігація та бічна панель розташовуються вище, ніж у попередньому прикладі. Це дивно!
Насправді так відбувається через цей фрагмент коду.
<code data-language="css">#main > ; nav, #main > aside { flex: 0 0 20vw; background: beige; }Зокрема код flex: 0 0 20vw встановлює для flex-base значення 20vw, що становить 20% від ширини області перегляду. Раніше ми застосовували це значення для ширини елементів, але тепер, коли значення flex-direction встановлено як column, воно використовується для висоти.
Якщо ми хочемо, щоб висота була заснована на вмісті, то можемо змінити це значення на auto або взагалі видалити рядок.
><!doctype html>
<title>Приклад</title> <style> * { box-sizing: border-box; }
body { display: flex; min-height: 100vh; flex-direction: column; margin: 0; }
#main { display: flex; flex: 1; }
#main > article { flex: 1; }
#main > nav, #main > aside { background: beige; }
#main > nav { order:-1; }
header, footer { background: yellowgreen; height: 20vh; }
header, footer, article, nav, aside { padding: 1em; }
@media screen and (max-width: 575px) { #main { flex-direction: column; }
}
</style>
<body> <header>Шапка</header> <div id="main"> <article>Стаття</article> <nav>Навігація</nav> <aside>Бічна панель</aside>
</div> <footer>Підвал</footer>
</body> 
Спочатку мобільні
Ми могли б переключити код так, щоб наш макет став «спочатку мобільні». Це термін застосовується для макетів, які створюються в основному для мобільних пристроїв, але включають медіа-запит, який змінює макет для більших пристроїв. Це протилежно тому, що ми робили вище, де наш макет за замовчуванням був для великих пристроїв, а ми додали медіа-запит для маленьких пристроїв. Таким чином, ми можемо взяти наведений вище приклад і змінити його таким чином .
<!doctype html>
<title>Приклад</title> <style> * { box-sizing: border-box; }
body { display: flex; min-height: 100vh; flex-direction: column; margin: 0; }
#main { display: flex; flex: 1; flex-direction: column; }
#main > article { flex: 1; }
#main > nav, #main > aside { background: beige; }
#main > nav { order:-1; }
header, footer { background: yellowgreen; height: 20vh; }
header, footer, article, nav, aside { padding: 1em; }
@media screen and (min-width: 576px) { #main { flex-direction: row; }
#main > nav, #main > aside { flex: 0 0 20vw; }
}
</style>
<body> <header>Шапка</header> <div id="main"> <article>Стаття</article> <nav>Навігація</nav> <aside>Бічна панель</aside>
</div> <footer>Підвал</footer>
</body>Макет, як і раніше, виглядає так само (що добре), але наш медіа-запит тепер інший.
<code data-language="css">@media screen and (min-width: 576px) { #main { flex-direction: row; }
#main > nav, #main > aside { flex: 0 0 20vw; }
}А весь інший код йде перед ним.
Зверніть увагу, що медіа-запит цього разу використовує min-width, щоб відповідати всім пристроям зазначеної ширини та більше. У попередньому прикладі ми використовували max-width, щоб відповідати лише пристроям, які були вказаної ширини або менше.
Отже, ми встановили для початкового макету значення flex-direction як column, а для великих пристроїв як row. Ми також повернули назад flex-basis для великих пристроїв.