Ответ
Адаптивная вёрстка — это практическая реализация адаптивного дизайна с помощью HTML и CSS, обеспечивающая гибкое отображение контента на разных устройствах.
Ключевые техники и принципы:
- Mobile First: Начинать проектирование со стилей для мобильных устройств, а затем добавлять улучшения для больших экранов через
min-widthмедиазапросы. - Гибкая сетка (Fluid Grid): Использование относительных единиц (
%,vw,fr) вместо фиксированныхpx..container { width: 90%; max-width: 1200px; margin: 0 auto; } .column { width: 100%; } /* На мобильных */ @media (min-width: 768px) { .column { width: 48%; float: left; margin-right: 4%; } /* На планшетах */ } - Гибкие медиа (Flexible Media): Изображения и видео, которые масштабируются в пределах контейнера.
img, video, iframe { max-width: 100%; height: auto; } - Медиазапросы (Media Queries): Правила CSS, применяемые при определённых условиях (ширина экрана, плотность пикселей, ориентация).
/* Типичные breakpoints */ @media (min-width: 576px) { /* Small devices */ } @media (min-width: 768px) { /* Medium devices */ } @media (min-width: 992px) { /* Large devices */ } @media (min-width: 1200px) { /* X-Large devices */ } - Относительные единицы для типографики: Использование
remиemдля размеров шрифта и отступов, чтобы они масштабировались относительно корневого или родительского элемента.
Ответ 18+ 🔞
Ну вот, сидишь ты такой, верстаешь себе сайт, а он на телефоне выглядит как пизда с ушами — всё плывёт, колонки друг на друге сидят, кнопку ткнуть невозможно. И тут ты понимаешь: пора, блядь, делать адаптивную вёрстку. Это не какая-то магия, а просто набор правил, чтобы твой контент не выглядел уёбищно на любом экране.
Запомни главное, чувак: Mobile First. Не надо начинать с огромного монитора. Начни с мобилы, с этой маленькой хуйни, а потом уже, как богатый дядя, наращивай жирок для планшетов и десктопов через min-width. Иначе потом будешь всё переделывать, а это, блядь, терпения ноль ебать.
Гибкая сетка (Fluid Grid) — это когда ты отказываешься от жёстких пикселей (px) как от дурной привычки. Всё в процентах (%), vw или этих новых fr. Смотри, как просто:
.container { width: 90%; max-width: 1200px; margin: 0 auto; }
.column { width: 100%; } /* На мобильных — одна колонка, и не еби мозг */
@media (min-width: 768px) {
.column { width: 48%; float: left; margin-right: 4%; } /* На планшетах уже две */
}Гибкие медиа (Flexible Media) — это святое правило. Картинки и видео должны вписываться в контейнер, а не разъёбывать его нахуй. Одна строчка, и ты герой:
img, video, iframe { max-width: 100%; height: auto; }Медиазапросы (Media Queries) — это твои переключатели между мирами. Типа «если экран шире 768 пикселей, включи вот эти стили, а то тут уже не мобила, можно и пошиковать».
/* Типичные breakpoints, запомни их как «Отче наш» */
@media (min-width: 576px) { /* Маленькие устройства, но уже не совсем телефоны */ }
@media (min-width: 768px) { /* Планшеты, ёпта */ }
@media (min-width: 992px) { /* Ноутбуки и мелкие мониторы */ }
@media (min-width: 1200px) { /* Овердохуища широкие экраны */ }И последний лайфхак — относительные единицы для текста. Забей на пиксели для шрифтов. Используй rem и em. Тогда, если пользователь увеличит базовый размер шрифта в настройках браузера, у тебя всё пропорционально масштабируется, а не разъедется к хуям. Это не только для красоты, это, блядь, доступность.
Вот и вся философия. Сделал по этим пунктам — и твой сайт будет как хитрая жопа, которая и в узких джинсах, и в широких шортах сидит отлично. Главное — начать с мобилки, а не наоборот, а то будешь потом, как Герасим, Муму топить — переделывать всё с нуля.