Використання брейкпоінтів для адаптивного дизайну в Tailwind CSS
Tailwind CSS спрощує створення адаптивних дизайнів, надаючи утилітарні класи для брейкпоінтів і медіа-запитів.
Брейкпоінти
Брейкпоінти в Tailwind CSS визначаються для конкретних розмірів екрана, що дозволяє застосовувати різні стилі при різній ширині вікна перегляду.
Стандартні брейкпоінти
| Breakpoint | Description |
|---|---|
sm | 640px |
md | 768px |
lg | 1024px |
xl | 1280px |
2xl | 1536px |
Ці брейкпоінти можна використовувати як префікси для умовного застосування стилів залежно від ширини вікна перегляду.
index.html
Пояснення
bg-blue-500: Встановлює колір фону на відтінок синього за замовчуванням;p-4: Додає внутрішній відступ 1rem (16px) з усіх сторін;sm:bg-green-500: Встановлює колір фону на відтінок зеленого для малих екранів і більших (min-width: 640px);md:bg-red-500: Встановлює колір фону на відтінок червоного для середніх екранів і більших (min-width: 768px);lg:bg-yellow-500: Встановлює колір фону на відтінок жовтого для великих екранів і більших (min-width: 1024px);xl:bg-purple-500: Встановлює колір фону на відтінок фіолетового для надвеликих екранів і більших (min-width: 1280px).
Застосування адаптивних стилів
Можна застосовувати адаптивні стилі до будь-якого утилітарного класу у Tailwind CSS, додаючи до нього префікс із брейкпоінтом.
index.html
Пояснення
Відступи (Padding):
p-4: Додає відступ 1rem (16px) з усіх сторін за замовчуванням;sm:p-6: Додає відступ 1.5rem (24px) з усіх сторін для малих екранів і більших (min-width: 640px);md:p-8: Додає відступ 2rem (32px) з усіх сторін для середніх екранів і більших (min-width: 768px);lg:p-10: Додає відступ 2.5rem (40px) з усіх сторін для великих екранів і більших (min-width: 1024px);xl:p-12: Додає відступ 3rem (48px) з усіх сторін для надвеликих екранів і більших (min-width: 1280px).
Розмір тексту:
sm:text-sm: Встановлює розмір шрифту малий (0.875rem або 14px) для малих екранів і більших (min-width: 640px);md:text-base: Встановлює розмір шрифту базовий (1rem або 16px) для середніх екранів і більших (min-width: 768px);lg:text-lg: Встановлює розмір шрифту великий (1.125rem або 18px) для великих екранів і більших (min-width: 1024px);xl:text-xl: Встановлює розмір шрифту надвеликий (1.25rem або 20px) для надвеликих екранів і більших (min-width: 1280px).
Насиченість шрифту (Font Weight):
sm:font-light: Застосовує легку насиченість шрифту для малих екранів і більших (min-width: 640px);md:font-normal: Застосовує нормальну насиченість шрифту для середніх екранів і більших (min-width: 768px);lg:font-semibold: Застосовує напівжирну насиченість шрифту для великих екранів і більших (min-width: 1024px);xl:font-bold: Застосовує жирну насиченість шрифту для надвеликих екранів і більших (min-width: 1280px).
Примітка
Потрібна конкретна інформація щодо адаптивності? Зверніться до наступного посилання.
1. Як застосувати колір фону на брейкпоінті md?
2. Який клас утиліти змінює відступи на брейкпоінті sm?
Дякуємо за ваш відгук!
Запитати АІ
Запитати АІ
Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат
Awesome!
Completion rate improved to 3.57Використання брейкпоінтів для адаптивного дизайну в Tailwind CSS
Свайпніть щоб показати меню
Tailwind CSS спрощує створення адаптивних дизайнів, надаючи утилітарні класи для брейкпоінтів і медіа-запитів.
Брейкпоінти
Брейкпоінти в Tailwind CSS визначаються для конкретних розмірів екрана, що дозволяє застосовувати різні стилі при різній ширині вікна перегляду.
Стандартні брейкпоінти
| Breakpoint | Description |
|---|---|
sm | 640px |
md | 768px |
lg | 1024px |
xl | 1280px |
2xl | 1536px |
Ці брейкпоінти можна використовувати як префікси для умовного застосування стилів залежно від ширини вікна перегляду.
index.html
Пояснення
bg-blue-500: Встановлює колір фону на відтінок синього за замовчуванням;p-4: Додає внутрішній відступ 1rem (16px) з усіх сторін;sm:bg-green-500: Встановлює колір фону на відтінок зеленого для малих екранів і більших (min-width: 640px);md:bg-red-500: Встановлює колір фону на відтінок червоного для середніх екранів і більших (min-width: 768px);lg:bg-yellow-500: Встановлює колір фону на відтінок жовтого для великих екранів і більших (min-width: 1024px);xl:bg-purple-500: Встановлює колір фону на відтінок фіолетового для надвеликих екранів і більших (min-width: 1280px).
Застосування адаптивних стилів
Можна застосовувати адаптивні стилі до будь-якого утилітарного класу у Tailwind CSS, додаючи до нього префікс із брейкпоінтом.
index.html
Пояснення
Відступи (Padding):
p-4: Додає відступ 1rem (16px) з усіх сторін за замовчуванням;sm:p-6: Додає відступ 1.5rem (24px) з усіх сторін для малих екранів і більших (min-width: 640px);md:p-8: Додає відступ 2rem (32px) з усіх сторін для середніх екранів і більших (min-width: 768px);lg:p-10: Додає відступ 2.5rem (40px) з усіх сторін для великих екранів і більших (min-width: 1024px);xl:p-12: Додає відступ 3rem (48px) з усіх сторін для надвеликих екранів і більших (min-width: 1280px).
Розмір тексту:
sm:text-sm: Встановлює розмір шрифту малий (0.875rem або 14px) для малих екранів і більших (min-width: 640px);md:text-base: Встановлює розмір шрифту базовий (1rem або 16px) для середніх екранів і більших (min-width: 768px);lg:text-lg: Встановлює розмір шрифту великий (1.125rem або 18px) для великих екранів і більших (min-width: 1024px);xl:text-xl: Встановлює розмір шрифту надвеликий (1.25rem або 20px) для надвеликих екранів і більших (min-width: 1280px).
Насиченість шрифту (Font Weight):
sm:font-light: Застосовує легку насиченість шрифту для малих екранів і більших (min-width: 640px);md:font-normal: Застосовує нормальну насиченість шрифту для середніх екранів і більших (min-width: 768px);lg:font-semibold: Застосовує напівжирну насиченість шрифту для великих екранів і більших (min-width: 1024px);xl:font-bold: Застосовує жирну насиченість шрифту для надвеликих екранів і більших (min-width: 1280px).
Примітка
Потрібна конкретна інформація щодо адаптивності? Зверніться до наступного посилання.
1. Як застосувати колір фону на брейкпоінті md?
2. Який клас утиліти змінює відступи на брейкпоінті sm?
Дякуємо за ваш відгук!
