Адаптивний веб-дизайн - Медіа-запити
Що таке медіа-запити?
Медіа-запит - це метод CSS, введений в CSS3.
Він використовує правило @media, щоб включити блок CSS властивостей, тільки якщо виконується певна умова.
Приклад
Якщо вікно браузера має розмір 600px або менше, колір фону буде світло-голубим:
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
Спробуйте самі »
Додати брекпоінт (точку переходу)
Раніше в цьому підручнику ми робили вебсторінку з рядками та стовпцями, і вона була адаптивною, але на маленькому екрані вона виглядала не дуже добре.
Медіа-запити можуть допомогти з цим. Ми можемо додати брекпоінт (точку переходу), коли визначені частини проєкту будуть вести себе по-різному на кожному брекпоінті.
Десктоп
Мобільний телефон
Використовуйте медіа-запит для додавання брекпоінту на 768 пікселів:
Приклад
Коли екран (вікно браузера) стає менше 768 пікселів, ширина кожного стовпця має складати 100%:
/* Для десктопів: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
@media only screen and (max-width: 768px) {
/* Для мобільних телефонів: */
[class*="col-"] {
width: 100%;
}
}
Спробуйте самі »
Mobile First - Завжди першим - дизайн для мобільних телефонів!
Mobile First (мобільний перший) - означає проєктування сайту для мобільних пристроїв до проєктування для настільного комп’ютера або будь-якого іншого пристрою (це прискорить відображення вебсторінки на невеликих - мобільних пристроях).
Це означає, що необхідно внести деякі зміни в CSS.
Замість зміни стилів, коли ширина стає менше, ніж 768px, необхідно змінити дизайн, коли ширина стає більше, ніж 768px. Це зробить дизайн Mobile First (пристосованим до мобільних пристроїв):
Приклад
/* Для мобільних телефонів: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 768px) {
/* Для десктопів: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
Спробуйте самі »
Ще інші брекпоінти
Ви можете додати стільки брекпоінтів, скільки необхідно.
Можна вставити брекпоінт між планшетами та мобільними телефонами.
Десктоп
Планшет
Телефон
Це можна зробити, додавши ще один медіа-запит (з роздільністю 600 пікселів) та набір нових класів для пристроїв розміром більше 600 пікселів (але менше 768 пікселів):
Приклад
Зверніть увагу, що два набори класів практично ідентичні, єдина відмінність полягає в назві (col- та col-s-):
/* Для мобільних телефонів: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 600px) {
/* Для планшетів: */
.col-s-1 {width: 8.33%;}
.col-s-2 {width: 16.66%;}
.col-s-3 {width: 25%;}
.col-s-4 {width: 33.33%;}
.col-s-5 {width: 41.66%;}
.col-s-6 {width: 50%;}
.col-s-7 {width: 58.33%;}
.col-s-8 {width: 66.66%;}
.col-s-9 {width: 75%;}
.col-s-10 {width: 83.33%;}
.col-s-11 {width: 91.66%;}
.col-s-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
/* Для десктопів: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
Може здатися дивним, що у нас є два набори ідентичних класів, але це дає нам можливість в HTML вирішувати, що буде відбуватися зі стовпцями на кожному брекпоінті:
HTML Приклад
Для десктопу:
Перший і третій розділи будуть займати по 3 стовпця кожен. Середня частина буде охоплювати 6 стовпців.
Для планшетів:
Перший розділ буде охоплювати 3 стовпця, другий - 9, а третій розділ буде відображатися під першими двома розділами та 12 стовпцями:
<div class="row">
<div class="col-3 col-s-3">...</div>
<div class="col-6 col-s-9">...</div>
<div class="col-3 col-s-12">...</div>
</div>
Спробуйте самі »
Типові брекпоінти пристроїв
Існує багато екранів та пристроїв різної висоти та ширини, тому складно створити точний брекпоінт для кожного пристрою. Для простоти ви можете обрати п’ять груп:
Приклад
/* Екстра маленькі пристрої (телефони 600px та нижче) */
@media only screen and (max-width: 600px) {...}
/* Маленькі пристрої (портретні планшети і великі телефони, 600px і вище) */
@media only screen and (min-width: 600px) {...}
/* Середні пристрої (альбомні планшети, 768px і вище) */
@media only screen and (min-width: 768px) {...}
/* Великі пристрої (ноутбуки / десктопи 992px і вище) */
@media only screen and (min-width: 992px) {...}
/* Екстра великі пристрої (великі ноутбуки та десктопи, 1200px та вище) */
@media only screen and (min-width: 1200px) {...}
Спробуйте самі »
Орієнтація: Портрет / Альбом
Медіа-запити також можна використовувати для зміни макету сторінки в залежності від орієнтації браузера.
У вас може буби набір CSS властивостей, які будуть застосовуватись лише тоді, коли вікно браузера ширше його висоти, так звана "альбомна" орієнтація:
Приклад
Вебсторінка буде мати світло-синій фон орієнтації в альбомному режимі:
@media only screen and (orientation: landscape) {
body {
background-color: lightblue;
}
}
Спробуйте самі »
Сховати елементи з медіа-запитами
Інше розповсюджене використання медіа-запитів - приховування елементів на екранах різних розмірів:
Приклад
/* Якщо розмір екрану складає 600 пікселів в ширину або менше, сховати елемент */
@media only screen and (max-width: 600px) {
div.example {
display: none;
}
}
Спробуйте самі »
Змінити розмір шрифту за допомогою медіа-запитів
Ви також можете використовувати медіазапити для зміни розміру шрифту елемента на екранах різних розмірів:
Змінний розмір шрифту.
Приклад
/* Якщо розмір екрану складає 601 пікселів або більше, встановіть розмір шрифту для <div> на 80px */
@media only screen and (min-width: 601px) {
div.example {
font-size: 80px;
}
}
/* Якщо розмір екрану 600px або менше, встановіть розмір шрифту для <div> на 30px */
@media only screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
}
Спробуйте самі »
CSS Довідник @media
Для повного огляду всіх типів медіа і функцій / виразів, будь ласка, перегляньте Довідник @media правил в CSS на нашому сайті W3Schools українською.
