Почему важно начинать верстку с базового разрешения?

Многие пользователи сталкиваются с такой проблемой: создали новый брейкпоинт для большого разрешения (например, для Full HD-монитора), сверстали на нем страницу — но на остальных брейкпоинтах верстка «едет», стили не применяются, и все работает не так, как задумано. Разберемся, почему так происходит и как этого избежать.

Смотрите видео:

https://vk.com/video-219751701_456239224

VK Видео | YouTube

Как работает наследование стилей в Taptop

В Taptop есть целая система брейкпоинтов, которая включает:

• базовое разрешение — компьютер;
• мобильные брейкпоинты — планшет и смартфон;
• дополнительные большие брейкпоинты — широкие экраны.

Важно понимать главный принцип: все изменения на всех брейкпоинтах наследуются от базового разрешения. Это ключевой момент для правильной адаптивной верстки. Именно поэтому изначально нужно верстать на базовом брейкпоинте и только потом добавлять изменения для других разрешений.

Когда вы начинаете верстать с нестандартного разрешения (например, с большого монитора), все внесенные там изменения не будут автоматически применяться к базовому разрешению и другим брейкпоинтам.

Пример неправильного подхода

Рассмотрим ситуацию:

1. Вы создали брейкпоинт для разрешения 1920px и выше.
2. Сверстали блок на этом разрешении.
3. При переключении на базовое разрешение обнаружили, что блок выглядит совсем не так, как задумывали.

Теперь придется заново создавать тот же самый дизайн на базовом разрешении, дублируя всю работу.

Правильный порядок верстки

Вот правильный подход к адаптивной верстке в Taptop:

1. Начинайте верстку всегда с базового разрешения.
2. Полностью завершите верстку на базовом разрешении.
3. После этого создавайте дополнительные брейкпоинты и делайте верстку для всех других разрешений.

Как правильно вносить изменения в верстку

При редактировании стилей пользуйтесь следующими правилами:

• Глобальные изменения, которые должны быть одинаковы на всех экранах, — вносите на базовом брейкпоинте.
• Локальные изменения, специфичные для конкретного размера экрана, — вносите на соответствующем брейкпоинте.

Что делать, если вы уже начали с неправильного разрешения?

Если вы уже сверстали страницу на нестандартном брейкпоинте, лучший выход:

1. Удалите созданный брейкпоинт.

2. Сверстайте все заново на базовом разрешении.
3. После завершения верстки на базовом разрешении создайте нужные дополнительные брейкпоинты и отредактируйте стили на них.

Резюме

Стили наследуются от базового разрешения — как для планшетов и мобильных телефонов, так и для брейкпоинтов с большими разрешениями. Всегда начинайте верстку с базового брейкпоинта.