Какие знаешь виды адаптивной верстки

Адаптивная верстка бывает нескольких видов:

1. Резиновая (Fluid Layout) – элементы растягиваются/сжимаются в % относительно родителя.

   css

   Копировать

   .container { width: 80%; }

2. Адаптивная (Adaptive Layout) – фиксированные breakpoints через медиазапросы.

   css

   Копировать

   @media (max-width: 768px) { ... }

3. Отзывчивая (Responsive Layout) – комбинация резиновой + адаптивной.

   css

   Копировать

   .block { width: 50%; }
   @media (max-width: 480px) { .block { width: 100%; } }

4. Mobile-first – верстка начинается с мобильных стилей, затем добавляются десктопные.

   css

   Копировать

   @media (min-width: 768px) { ... }

5. Гибкая (Flexbox/Grid) – современные CSS-технологии для автоматического адаптива.

   css

   Копировать

   .container { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }