Адаптивная вёрстка: зачем и как

Зачем нужен адаптивный дизайн

Более 60% пользователей заходят на сайты с мобильных устройств. Если ваш сайт не адаптирован — они уйдут к конкурентам.

Принципы адаптивной вёрстки

• Mobile-first — сначала мобильная версия
• Flexible grid — резиновая сетка
• Flexible images — масштабируемые изображения
• Media queries — точки перелома

Точки перелома

• Мобильные: 320-767px
• Планшеты: 768-1023px
• Десктоп: 1024px+