Что такое адаптивная вёрстка?

Адаптивная вёрстка — это практическая реализация адаптивного дизайна с помощью HTML и CSS, обеспечивающая гибкое отображение контента на разных устройствах.

Ключевые техники и принципы:

1. Mobile First: Начинать проектирование со стилей для мобильных устройств, а затем добавлять улучшения для больших экранов через min-width медиазапросы.
2. Гибкая сетка (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%; } /* На планшетах */
   }

3. Гибкие медиа (Flexible Media): Изображения и видео, которые масштабируются в пределах контейнера.

   img, video, iframe { max-width: 100%; height: auto; }

4. Медиазапросы (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 */ }

5. Относительные единицы для типографики: Использование rem и em для размеров шрифта и отступов, чтобы они масштабировались относительно корневого или родительского элемента.