Время на прочтение: < 1 минуты

На реальных примерах поделюсь как я оптимизирую сайты под мобильные устройства.

Рекомендую просто посмотреть видео в том порядки которые они есть

Типы верстки

• Статичная(static)
• Адаптивная(adaptive)
• Резиновая(responsive)

Статичная(static) верстка

Тип верстки подразумивающий использования статичных значений селекторов и статичных селекторов. При уменьшении ширины экрана в данном типе верстки возникает горизонтальный скрол, который не подходит под стандарты верстки.

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

Тип верстки — использующий медиа запросы(media queris) при уменьшения экрана перероспределяет контент и меняет размер с помощью медиа запросов.

Про типы верстки мы разобрались. Теперь идет перечень роликов где я на реальных примерах показываю как оптимизировать сайты под мобилки.

Резиновая(responsive) верстка

Антагонист статической верстки. Использует респонсив значения например проценты(%) использует резиновые селекторы такие как max — width.

Резиновый текст

Это текст который при изменении ширины экрана занимает определенную статичную часть экрана. Вместо значений в px используем значение vw. Детальней про единицы измерения — читаем тут

Видео про резиновый тескт

Responsive image

Про медиа запросы

Проcто о меди запросах. Дополнительно про медиа запросы можно прочитать тут

Wp медиа запросы

Как правильно подключить файл css с медиа запросами в WordPress

Адаптация

Адаптация и перераспределение контента с помощью javascript на примере BURGER MENU