вёрстки

school_flashfamily

тильда гуру

виды

school_flashfamily

grid-контейнер

тильда гуру

Часто используется при вёрстке сервисных сайтов. Контент занимает область шириной 1200px, безопасная зона вёрстки 1120px

+

Контент не меняет позиционирование экрана даже на больших мониторах

+

Грид-контейнер со стандартной сеткой хорошо сочетается со стандартными блоками

−

Нельзя прятать элементы за пределы рабочей области, так как их будет видно на больших экранах

−

Сложно кадрировать изображение на весь экран под разные разрешения ПК

−

Адаптив в гриде выглядит на всех устройствах по-разному

school_flashfamily

grid-контейнер

тильда гуру

Чтобы контент на первом блоке открывался на всю высоту c разных разрешений, нужно выставить grid container heigth 700px и поставить window container heigth 100%

school_flashfamily

тильда гуру

Закажите консультацию

и мы поможем определиться с моделью аппарата

примеры сайтов в grid-контейнере

Композиция блоков выглядит одинаково на всех разрешениях

school_flashfamily

autoscale

тильда гуру

Позволяет задать нестандартную сетку под проект. Одинаково выглядит на разных разрешения, тк контент растягивается пропорционально

+

+

−

Фото на больших разрешениях могут пикселить, их нужно загружать в очень высоком качестве и отключать lazyload

−

Плохо сочетается со стандартными блоками. Их приходится подгонять с помощью расширения Annex

−

Нужно проверять текстовый контейнер в адаптиве, тк на некоторых моделях телефонов строка может переноситься

Отлично выглядит в адаптиве, тк контент подстраивается под любой размер экрана

−

Изменяется масштаб текста, нужно подбирать размеры кеглей так, чтобы на всех мониторах шрифт выглядел хорошо. Для наборного текста это 12-14pt

school_flashfamily

autoscale

тильда гуру

Высота экрана в grid container height ставится 550−600px. Чтобы контент на первом блоке помещался по высоте на всех разрешениях, нужно поставить window container height 100, а всем элементам на экране задать позиционирование в axis x, axis y.

Автоскейл не работает с window-контейнером

school_flashfamily

тильда гуру

Закажите консультацию

и мы поможем определиться с моделью аппарата

примеры сайтов в autoscale

Положение и размеры элементов адаптируются под разрешение экрана, не изменяя масштаба

school_flashfamily

window-контейнер

тильда гуру

Чаще используется в креативных сайтах. Позволяет позиционировать контент от краёв экрана любого разрешения

+

+

−

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

Позволяет делать вёрстку интереснее, чем в грид-контейнере

school_flashfamily

window-контейнер

тильда гуру

Для корректного отображения элементов важно правильно задавать позиционирование относительно экрана. Это делается в полях: container, asis x, axis y.

school_flashfamily

тильда гуру

Закажите консультацию

и мы поможем определиться с моделью аппарата

примеры сайтов в window-контейнере

flash_family

спасибо :)

school_flashfamily

flashfamily

school.flashfamily

тильда гуру