4.1 Основні концепції
CSS-змінні і медіа-запити дають потужні інструменти для створення адаптивного веб-дизайну, який автоматично підлаштовується під різні розміри екранів і пристрої. Змінні дозволяють централізовано керувати стилями, а медіа-запити — змінювати ці стилі залежно від умов, таких як ширина екрана.
Основні концепції
- CSS-змінні: дозволяють задавати значення, які можна повторно використовувати по всьому CSS-коду. Вони можуть змінюватися в різних контекстах, таких як медіа-запити, що робить їх особливо корисними для адаптивного дизайну.
- Медіа-запити: дозволяють застосовувати CSS-стилі залежно від характеристик пристрою, таких як ширина чи висота екрана. Це дозволяє адаптувати зовнішній вигляд і поведінку веб-сторінки під різні пристрої.
Використання змінних у медіа-запитах
CSS-змінні можна використовувати всередині медіа-запитів для зміни значень стилів залежно від умов. Це дозволяє створювати більш гнучкі і зручні в підтримці адаптивні дизайни.
Приклад використання змінних у медіа-запитах:
:root {
--main-bg-color: #f0f0f0;
--main-text-color: #333;
--primary-color: #3498db;
--font-size: 16px;
}
body {
background-color: var(--main-bg-color);
color: var(--main-text-color);
font-size: var(--font-size);
}
a {
color: var(--primary-color);
}
@media (max-width: 600px) {
:root {
--main-bg-color: #e0e0e0;
--font-size: 14px;
}
}
@media (min-width: 601px) and (max-width: 1200px) {
:root {
--main-bg-color: #d0d0d0;
--font-size: 15px;
}
}
@media (min-width: 1201px) {
:root {
--main-bg-color: #f0f0f0;
--font-size: 16px;
}
}
<body>
<p>Це абзац із посиланням на <a href="#">Example.com</a>.</p>
</body>
Пояснення:
У цьому прикладі значення змінних змінюються залежно від ширини екрана:
- Для екранів шириною до 600px фон змінюється на темніший відтінок, а розмір шрифту зменшується.
- Для екранів шириною від 601px до 1200px фон змінюється на середній відтінок, а розмір шрифту трохи збільшується.
- Для екранів шириною більше 1200px застосовуються початкові значення змінних.
4.2 Приклади змінних у медіа-запитах
Приклад 1: Адаптивні відступи та розміри шрифтів
:root {
--padding: 20px;
--font-size: 16px;
}
.container {
padding: var(--padding);
font-size: var(--font-size);
}
@media (max-width: 600px) {
:root {
--padding: 10px;
--font-size: 14px;
}
}
@media (min-width: 601px) and (max-width: 1200px) {
:root {
--padding: 15px;
--font-size: 15px;
}
}
@media (min-width: 1201px) {
:root {
--padding: 20px;
--font-size: 16px;
}
}
<div class="container">
<p>Цей контейнер адаптивний із змінними відступами та розміром шрифта.</p>
</div>
Пояснення:
- У цьому прикладі контейнер
.containerзмінює свої відступи та розмір шрифта в залежності від ширини екрана.
Приклад 2: Темізація сайту із використанням змінних та медіа-запитів
:root {
--bg-color: #ffffff;
--text-color: #000000;
--link-color: #3498db;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
}
a {
color: var(--link-color);
}
@media (prefers-color-scheme: dark) {
:root {
--bg-color: #000000;
--text-color: #ffffff;
--link-color: #9b59b6;
}
}
<body>
<p>Цей текст і посилання адаптуються до колірної схеми користувача. Перейдіть на <a href="#">Example.com</a>.</p>
</body>
Пояснення:
- У цьому прикладі сайт змінює кольорову схему в залежності від вподобань користувача (
prefers-color-scheme: dark). Колір фону, тексту та посилань змінюються автоматично при перемиканні між світлою і темною темою.
4.3 Адаптивна сітка
Приклад використання змінних і медіа-запитів для адаптивної сітки:
:root {
--columns: 1fr;
--gap: 10px;
}
.grid-container {
display: grid;
grid-template-columns: var(--columns);
gap: var(--gap);
}
@media (min-width: 600px) {
:root {
--columns: 1fr 1fr;
}
}
@media (min-width: 900px) {
:root {
--columns: 1fr 1fr 1fr;
}
}
<div class="grid-container">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
</div>
Пояснення:
- У цьому прикладі використовується адаптивна сітка, яка змінює кількість колонок залежно від ширини екрана. На вузьких екранах (до 600px) сітка має один стовпець, на середніх (від 600px до 900px) два стовпці, і на широких (більше 900px) три стовпці.
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ