Страница должна выглядеть хорошо на любых разрешениях экрана (не только отрисованных в макете). А также не должна ломаться при переполнении контентом.

От самых малых точек десктопа до самых больших страница выглядит одинаково. Все элементы находятся на своем месте, не меняются пропорции элементов.

При уменьшении ширины контента пропорционально уменьшаются элементы и отступы. При необходимости могут переноситься элементы согласно макету.

• Пример:

1. На всех промежуточных разрешениях используется резиновая вёрстка.

2. Не должно быть дефектов при изменении размера страниц

   • Подробнее
   • Пример:
   • Пример:

   При уменьшении экрана:

   1. Не меняются пропорции карточек на резине, содержащих в себе контентные изображения.
      • Подробнее
   2. Фоновые изображения адаптируются при уменьшении экрана.
   3. Декоративные изображения пропорционально уменьшаются на резине при уменьшении экрана.
      • Подробнее
   4. Текст на резине при уменьшении экрана может перестраиваться.
      • Подробнее
   5. Ссылки в навигации также могут переноситься на новую строку для нужд резины.
      • Подробнее

   При увеличении экрана:

   1. Фоны тянутся при увеличении экрана.
   2. Если в десктопной версии ширина страницы больше, чем в макете, то тянется только фон, элементы сохраняют свое положение.
      • Пример:
   3. Верстка корректно отображается на ширине от 1920 до 2600.
      • Подробнее
   4. В мобильной версии тянутся кликабельные элементы.
      • Подробнее
      • Пример

Тестирование

Проверь верстку на резине на всех точках.

Резина на мобильных устройствах проверяется в Сhrome Devtools на настройках Mobile или Mobile (no touch). Десктопная версия на настройках Desktop

• Как вызвать:
• Подробнее о работе с Devtools:
• [ ] В резиновой верстке должен отсутствовать горизонтальный скролл на всех устройствах
  • Пример:
• [ ] Ширина (границы) всех элементов соответствует макету. Элементы не выпадают из границ контейнеров и соответствуют сетке на всей резине
  • Пример:
  • Пример:
  • Пример:
  • Пример: