Адаптивная верстка

  1. Минимальная ширина сайта должная быть = 320px
  2. Диапазоны разрешения экранов

    Основные разрешения
    Desktop1280px — ...
    Laptop1024px — 1279px
    Tablet768px — 1023px
    Mobile... — 767px
    Дополнительные разрешения
    Mobile540px — 639px
    Mobile480 — 539px
    Mobile... — 479px
  3. Viewport

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  4. Запрещаем мобильным устройствам делать номера телефонов ссылками

    Особенно это косается iPhone

    <meta name="format-detection" content="telephone=no"/>

  5. Размер шрифта текстовых полей обязательно должен быть 16px
  6. Скрывать ссылки на такие элементы как: печать, pdf, соц.сети, отложить, сравнить.
  7. Скрытие и появление (анимация) мобильной шапки при скроле страницы делаем в стиле google play. При скроле вниз - шапка должна скрываться, при скроле вверх - появляться.
  8. Слайдеры
    • Пролистывание слайдов должно происходить в режиме свободной прокрутки (free mode).

      когда на экране частично виден следующий слайд.
    • Скрываем стрелки листания.
    • Добавляем точки перелистывания.
  9. Ко всем таблицам добавляем обертку через скрипт$('table').wrap('<div class="table-wrapper"></div>');