скидки в связи с коронавирусом covid-19

Как правильно создавать адаптивность сайта? Шпаргалка наглядно ответит на этот вопрос.

Пособие актуально веб-дизайнерам и верстальщикам. Рекомендуем посмотреть это видео о media-запросах.

Основные типы записи media-запросов

Адаптивность сайта Desktop FirstПри ширине экрана в 1000px (и менее) будут срабатывать стили
Адаптивность сайта Mobile First
При ширине экрана в 1000px (и более) будут срабатывать стили
Адаптивность сайта комбинированный метод
При ширине экрана в 900px (и менее) и 1200px (и более) будут срабатывать стили

Основные ситуации на сайте

Первый экран с изображением

адаптивность первого экрана

Меню и первый экран

адаптивное меню сайта

Три колонки

Три колонки

Блок с детальным описанием

адаптивный блок описания

Галерея изображений

адаптивность сайта

Большая галерея изображений

галерея изображений слайдер

Блок с двумя кнопками

адаптивность кнопки сайта

Преимущества товара

резиновый сайт

Счетчик / Статистика

статистика счетчик адаптивность сайта

Форма отправки

форма отправки с сайта