/
d.vader
/
e2e
Обзор
Документация
Войти
/
d.vader
/
e2e
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
CI/CD
Аналитика
Безопасность
master
src/components/styleExample/Adaptive0.tsx
28 строк
1 KB
Boris Meshcheryakov
initial commit
01 окт 2025, 09:22
01 окт 2025, 09:22
3edac10
Код
Авторство
О чём код?
export const Adaptive0 = () => { return ( <> {/* // Без адаптива */} <div className="grid grid-cols-1 gap-4"> <div>Карточка 1</div> <div>Карточка 2</div> <div>Карточка 3</div> </div> {/* // С адаптивом (Mobile First!) */} <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> <div>Карточка 1</div> <div>Карточка 2</div> <div>Карточка 3</div> </div> {/* // Бургер-меню условно показываем на маленьких экранах, а на больших — нет */} <button className="md:hidden">☰</button> {/* // Наоборот: на мобильном скрываем, на десктопе показываем */} <div className="hidden md:block">Десктопное меню</div> <h1 className="text-xl font-bold mt-4 md:text-3xl lg:mt-8"> Заголовок который становится больше </h1> </> ); };