Редактор Studio: Настройка размера элементов | Центр Поддержки

Редактор Studio: Настройка размера элементов

6 мин. чтения

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

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

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

Содержание:

Совет:

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

Изменение размера элемента

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

В панели инспектора вы можете проверить точную ширину и высоту элемента в пикселях. При необходимости вы можете ввести свои значения ширины / высоты.

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

Настройка размера в пикселях*

Пиксель (px)* - это единица измерения в редакторе Studio. Он позволяет редактировать размер, используя знакомые размеры (пиксели), в то время как фактические измерения являются адаптивными.

Другими словами, вы настраиваете дизайн в пикселях, который представляет размер на холсте, и элемент остается адаптивным. Конкретные значения и размер блоков зависят от выбранного вами поведения. Наведите курсор на px *, чтобы увидеть расчет и используемые юниты размера.

В приведенном ниже примере ширина контейнера на текущем холсте составляет 1000 пикселей*. Фактическая единица измерения - проценты, поэтому ширина указана относительно каждого экрана (80%).

Скриншот, показывающий, что при наведении курсора на px * в инспекторе открывается всплывающее окно с фактическим расчетом

В чем разница между px* и px?

Оба позволяют редактировать в пикселях, однако:

px * означает, что размер, который вы видите, соответствует размеру экрана, с которым вы работаете в данный момент.
px означает, что для разных размеров экрана размер фиксирован.

Выбор адаптивного поведения элемента

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

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

В чем разница между доступными поведениями?

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

Доступные поведения есть для каждого элемента, наиболее распространенные:

Сохранять пропорции: пропорции элемента (ширина и высота) сохраняются на всех экранах.
Адаптировать по ширине / высоте: ширина / высота элемента изменяется автоматически относительно его родительского элемента.
Фиксированный размер: элемент всегда остается одного размера, его размер не меняется на экране.
По размеру экрана: при этом секция занимает всю высоту вьюпорта (100 vh). Вы можете настроить vh, чтобы он занимал меньше места.
Растянуть: элемент растягивается по размеру своего родительского контейнера на всех размерах экрана.
Объятие: между элементом и его ограничительной рамкой нет пробелов. Размер ограничительной рамки на каждом экране зависит от контента внутри.
Примечание: это также поведение по умолчанию для горизонтального стека.

Если вы работаете с текстом, есть два типа поведения:

Переносить по словам: размер шрифта остается одинаковым на всех экранах, но текст переносится по размеру его ограничительной рамки. Это добавляет больше строк для отображения текста.
Объятие: это не оставит пробелов между текстом и его ограничительной рамкой. Это также означает, что количество строк в тексте всегда остается одинаковым, независимо от размера экрана.

Примечание:

Выбранное адаптивное поведение влияет на используемый размер. Например, при выборе поведения «Фиксированный размер», измерение меняется с px* на px.

Чтобы выбрать другое адаптивное поведение:

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

Скриншот раскрывающегося списка Адаптивное поведение при его открытии и доступных параметров.

Использование дополнительных настроек измерения

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

Это означает, что вы можете работать с адаптивными блоками вместо пикселей, что открывает новый набор возможностей.

Какие параметры доступны?

Вы можете выбрать нужные:

Пиксели (px): если вы хотите, чтобы элемент оставался одинаковым на экране любого размера, вы можете просто установить его высоту и ширину в значениях в пикселях.
Процент (%): значение ширины / высоты элемента зависит от размеров его родительского элемента. Это гарантирует, что размер элемента изменится пропорционально его родительскому элементу.
- Например, вы можете прикрепить текстовый элемент (дочерний элемент) к контейнеру (родительский элемент) и установить его ширину на 50%. Таким образом, ваш текст всегда занимает 50% ширины контейнера независимо от размера экрана.
Ширина и высота вьюпорта (vw и vh): эти размеры представляют ширину и высоту данного вьюпорта (браузера).
- Например, 1vw по ширине = 1% от ширины браузера.
Макс. контент (max-c): вы можете использовать это значение, чтобы установить ширину элемента и сделать ее зависимой от размера его дочерних элементов - независимо от того, насколько велик контент или сколько слов он содержит. Родительский элемент соответствует контенту.
Рассчитать (calc): используя основные математические правила, вы можете написать «формулу», которая определяет ширину или высоту элемента. В этом расчете можно сочетать разные измерения (например, vh и px).
- Например, вы можете сделать так, чтобы хедер и секция занимали всю высоту вьюпорта (100vh). Если высота заголовка 100 пикселей, высота секции будет рассчитана так: (100vh - 100 пикселей). Это вычитает высоту хедера из вьюпорта.

Авто ширина и высота

Для некоторых элементов ширина или высота уже установлены на Авто. Это означает, что контент элемента определяет ширину / высоту, что позволяет добавлять или удалять контент, не беспокоясь о изменении размера.

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

Чтобы открыть и изменить дополнительные настройки:

Выберите соответствующий размер экрана в редакторе.
Выберите элемент.
Нажмите на стрелку Открыть инспектор в правом верхнем углу.
Нажмите значок Другие действия рядом с пунктом Размер.
Активируйте переключатель Дополнительные настройки.
Измените размер при необходимости: ширину, высоту, а также минимальные и максимальные значения.
Совет: перейдите на другую единицу (например, с px на %), нажав на нее в инспекторе. Это откроет список доступных размеров элемента.

GIF, показывающий список результатов, который открывается при нажатии на него в инспекторе.

Настройка размера

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

Чтобы установить параметры размера сайта:

Нажмите на значок Wix Studio в левом верхнем углу.
Наведите курсор на Вид.
Наведите курсор на Настройки размеров.
Выберите нужное:
- Всегда показывать дополнительные: размер в инспекторе всегда установлен на дополнительном уровне.
  Примечание: в этом режиме отключается возможность переключить определенные элементы из дополнительной настройки размера.
- Установить для каждого элемента: вы устанавливаете размер для каждого элемента.

Скриншот верхнего меню в редакторе Studio, где вы можете управлять настройками размера.

Была ли статья полезна?

В этой статье

Изменение размера элемента
Настройка размера в пикселях*
Выбор адаптивного поведения элемента
Использование дополнительных настроек измерения
Настройка размера