💻 Про брейкпоинты на Тильде. Чать 2: Резиновая верстка
Под резиновой вёрсткой на Тильде я подразумеваю вёрстку по window контейнеру любым доступным способом: в рх, % или в автолейаутах.
Т.к. при таком виде верстки шрифты не масштабируются автоматически (только расстояния тянутся по горизонтали), то я подстраиваю шрифты исключительно с помощью создания новых БП.
И так как я пытаюсь добиться максимальной гармонии в отображении дизайна на всех устройствах, то при виндоу вёрстке у меня получается довольно много БП:
320, 360, 400 (опционально), 480, 640, 960 (или 980), 1200, 1400 (опционально), 1600 (или 1800), 2000.
В целом здесь у меня подход такой же как и при автоскейле, только дробить все пространство разрешений на БП я предпочитаю чаще, чтобы подстраивать мелкие нюансы дизайна под определенное устройство.
🔸 320
Не убираю, верстаю отдельно и под такие телефоны тоже. Этот БП идёт отдельно от других телефонных БП т.к. здесь ну вообще ничего толком не помещается 🫠 Поэтому верстаю лишь бы за экран не вылазило, тут не до эстетики ))
🔸 360
Верстаю нормально, т.к. с этого разрешения начинается бОльшая часть телефонов.
🔸 400 (опционально)
Создаю этот БП если нужно подстроить что-то в дизайне под широкие телефоны.
🔸 480
Верстаю под ещё более широкие вертикальные устройства по типу Samsung Galaxy Note — гибрид телефона и планшета.
🔸 640
Вертикальные планшеты, тот же вид, что и при 480, но шрифты и отступы чуть крупнее.
🔸 960 (или 980)
Горизонтальные планшеты: упрощённая десктопная версия.
🔸 1200
Ноутбуки: компактная десктопная версия.
🔸 1400 (опционально)
Создаю дополнительный БП для ноутбуков с высоким разрешением, если чувствую, что 1200 не растянется как нужно.
🔸 1600 (1800)
Обязательно создаю дополнительный БП для FullHD мониторов, т.к. предыдущий БП точно не растянется без дыр. Да и шрифты здесь подогнать было бы неплохо.
🔸 2000
После недавнего обновления Тильды, которое даёт возможность добавлять БП до 2560рх, обязательно создаю его при виндоу верстке для 2К мониторов. Почему создаю БП с запасом, а не впритык к разрешению, писала в предыдущем посте.
▪️ Заключение
Мой подход к определению количества брейкпоинтов для Zero блока многим покажется избыточным, ведь все хотят сэкономить на времени, отведённом на вёрстку, и использовать как можно меньше БП. Я могу вас понять и ни в коем случае не пропагандирую свой метод, как единственно верный. Лишь рассказываю о своем опыте качественной верстки, адаптированной для большинства устройств, даже самых непопулярных.
Делитесь и вы своими мыслями и подходом к выстраиванию системы БП в комментариях 😊
#тильда #верстка
