Перейти на PRO

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

Тип вопроса: Веб-тестирование Вероятность: 10% Категория: QA Тестировщик

Ответ

Адаптивная вёрстка (Responsive Web Design, RWD) — это подход к разработке веб-интерфейсов, при котором сайт автоматически подстраивает свой макет, изображения и типографику под размер и ориентацию экрана устройства пользователя.

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

  1. Гибкая сетка на основе относительных единиц:

    • Использование %, fr (Grid), flex-grow вместо фиксированных px.
    • CSS Grid и Flexbox — основные инструменты для создания гибких макетов.

  2. Гибкие медиа (изображения, видео):

    • max-width: 100%; height: auto; для изображений.
    • Атрибут srcset и элемент <picture> для загрузки изображений оптимального размера.

  3. Медиазапросы (CSS Media Queries):

    • Позволяют применять разные CSS-правила в зависимости от характеристик устройства (ширина, высота, ориентация, разрешение).

Пример базового медиазапроса для мобильных устройств (Mobile First):

/* Базовые стили для мобильных (Mobile First) */
.container {
  padding: 1rem;
  width: 100%;
}

/* Стили для планшетов и выше */
@media (min-width: 768px) {
  .container {
    width: 750px;
    margin: 0 auto;
  }
  .sidebar {
    display: block; /* Показываем сайдбар на больших экранах */
  }
}

/* Стили для десктопов */
@media (min-width: 1200px) {
  .container {
    width: 1140px;
  }
}

Подход Mobile First:

  1. Сначала разрабатывается интерфейс для мобильных устройств (самый узкий видport).
  2. С помощью медиазапросов min-width добавляются улучшения для более широких экранов.
  3. Преимущества: Упрощение кода, приоритет производительности на мобильных, прогрессивное улучшение.

Тестирование: Обязательно проверять на реальных устройствах, использовать эмуляторы в DevTools и инструменты вроде BrowserStack.

Ответ 18+ 🔞

Да ты посмотри, что эти фронтендеры выдумали! Адаптивная вёрстка, блядь. Это ж когда твой сайт, сука, как хамелеон, под каждый экран подстраивается. Сидит чел на телефоне — всё красиво, удобно. Перешёл на планшет — оп, макет перестроился, пиздец как умно! Открыл на мониторе с диким разрешением — и тут всё на своих местах, блядь. Не надо скроллить туда-сюда, как слепой крот.

А технологий-то, ёпта, овердохуища! Главное — не забить себе мозг кирпичами из пикселей.

Первое, хули они там юзают:

  1. Сетка гибкая, блядь. Забудь про px, это каменный век. Теперь всё на процентах, на этих fr от Grid'а, на flex-grow. Словно резиновое всё, растягивается и сжимается. CSS Grid и Flexbox — это твои новые лучшие друзья, пока они тебя не доведут до белого каления, потому что в IE11 это всё ебётся, как последняя шлюха.

  2. Картинки гибкие. А то вставишь фотку на 4000 пикселей, а у чела экран 320px — он её, сука, до посинения грузит, трафик жрёт. Пишем max-width: 100%, и она как умная, в родителя впихивается. А для самых хитрых есть <picture> и srcset, чтобы смартфону не грузить здоровенную хуйню, а дать маленькую оптимизированную.

  3. Медиазапросы — это магия, ёбана! Это такие волшебные условия в CSS. Типа, «если ширина экрана больше 768 пикселей, то, сука, применяй вот эти стили». Или «если устройство повернули, сделай вот так». Без них нихуя не работает.

Вот смотри, как это выглядит в коде, простейший пример (Mobile First):

/* Это база, для телефонов, самых узких. Тут всё просто, как три копейки. */
.container {
  padding: 1rem;
  width: 100%;
}

/* А вот если экран уже как у планшета (от 768px), то включаем мозги. */
@media (min-width: 768px) {
  .container {
    width: 750px; /* Делаем пошире, но центруем */
    margin: 0 auto;
  }
  .sidebar {
    display: block; /* А сайдбар, который на телефоне прятали, теперь показываем! */
  }
}

/* Ну а если вошёл усатый дядька с огромным монитором, для него отдельный банкет. */
@media (min-width: 1200px) {
  .container {
    width: 1140px; /* Во, какой широкий контейнер! */
  }
}

А подход, блядь, называется Mobile First. Смысл в чём? Начинаешь делать сайт с мобильной версии, с самой убогой и простой. Потом, как на дрожжах, наращиваешь фичи для больших экранов через min-width. Это как строить дом: сначала фундамент (мобилки), потом стены (планшеты), потом крышу и балкон (десктоп).

Почему так лучше? Да потому что мобильный трафик — это пиздец какой монстр, его дохуя. И если на телефоне всё тормозит и криво, то народ просто свалит, нахуй. А так — база работает быстро везде.

И главное, чувак, тестируй эту хуйню! Не верь слепо эмулятору в хроме. Возьми в руки, блядь, реальный телефон, старый айпад, какой-нибудь китайский планшет с ебучим разрешением. Увидишь такие косяки, что волосы дыбом встанут. В общем, работа не для слабонервных, но когда всё адаптируется — это, блядь, чистое искусство, в рот меня чих-пых!

© ХакСобесов, 2026
support@hacksobesov.com