Editor X: об адаптивном дизайне

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

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

В этой статье мы рассмотрим функции Editor X, которые помогут вам создать адаптивный сайт:

Гибкий размер и относительные единицы измерения помогают создать дизайн, который легко адаптируется к любому вьюпорту. При настройке дизайна в панели Инспектор вы можете выбирать между параметрами «Закрепленный» и «Гибкий». «Закрепленный» означает, что размер элемента остается неизменным независимо от вьюпорта, а «Гибкий» означает, что размер элемента автоматически изменяется в соответствии с размером экрана и вашими предпочтениями.

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

Используя относительные измерения, такие как процент (%), вы можете изменить размер дочерних элементов по отношению к их родительским элементам. Например, установите раздел, занимающий 50% ширины страницы независимо от размера экрана. Вы можете сделать то же самое с любым элементом или контейнером в секции, чтобы сделать свою страницу максимально респонсивной.

Размеры экрана - это точки, в которых ваш контент изменяется, чтобы посетители всегда видели наилучшую версию сайта, независимо от того, с какого устройства они его просматривают.

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

CSS Grids - это продвинутый инструмент макета, который позволяет вам точно размещать элементы внутри любого контейнера или секции.

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

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

Flexbox - это контейнер CSS, созданный вокруг элементов, чтобы обеспечить их автоматическое расположение в зависимости от размера экрана. Это полезный инструмент в адаптивном дизайне, который предотвращает беспорядок, например, когда элементы перекрываются или меняют свой порядок.

Используйте передовые технологические инструменты Flexbox, такие как лейаутеры или репитеры, чтобы автоматически настраивать контент под любой размер экрана. Вы также можете соединять в стек любую группу элементов вместе, чтобы создать вокруг них flex-контейнер. По умолчанию контейнер является прозрачным, но вы можете настроить дизайн по своему усмотрению.