Редактор Studio Two: настройка размера элемента
Эта статья посвящена новому редактору Studio Two, выпущенному в ноябре 2026 года. Если вы не уверены, какой редактор используете — Studio или Studio Two, подробнее об этом можно узнать здесь.
В редакторе Studio Two можно задать точный размер каждого элемента, чтобы дизайн автоматически адаптировался к любому устройству. Измените размер на холсте или на панели «Инспектор», чтобы задать точные размеры элемента.
При изменении размера отображается единица измерения px*, указанная в пикселях. Она масштабируется для каждого размера экрана в соответствии с адаптивным поведением элемента. Если поведение по умолчанию не подходит для дизайна, измените его или включите дополнительные настройки, чтобы напрямую управлять шириной и высотой.
Изменение размера элементов
Выберите удобный способ изменения размера элементов:
На холсте: нажмите на элемент, чтобы выбрать его на странице, и перетаскивайте боковые маркеры, пока элемент не достигнет нужного размера. Во время перетаскивания отображается точный размер элемента в пикселях.
На панели «Инспектор»: нажмите на элемент и откройте панель «Инспектор», чтобы посмотреть и изменить его точную ширину и высоту.
Использование px* как единицы измерения
В разделе «Размер» на панели «Инспектор» доступна относительная единица измерения, которая используется только в редакторе Studio Two, — px*.
Звездочка (*) рядом с «px» означает, что размер зависит от размера экрана, с которым вы сейчас работаете. Например, если перейти с компьютера на смартфон, ширина и высота элемента в px* соответственно уменьшатся.
px* обозначает значение в пикселях, однако фактический размер адаптируется автоматически. Наведите указатель на px* на панели, чтобы увидеть расчет и используемую адаптивную единицу измерения, например проценты или соотношение сторон.
Выбор адаптивного поведения
Настройте адаптивное поведение, которое определяет, будет ли элемент менять размер на разных экранах и каким образом. Для каждого элемента изначально задано поведение по умолчанию, но его можно изменить на более подходящее для дизайна.
Чтобы изменить адаптивное поведение элемента:
Выберите нужный элемент.
Нажмите значок Открыть Инспектор в правом верхнем углу редактора.
в правом верхнем углу редактора.
Откройте вкладку Дизайн.
Откройте раскрывающийся список Адаптивное поведение в разделе Размер.
Выберите новый тип адаптивного поведения.
Наведите указатель на варианты в раскрывающемся списке, чтобы посмотреть анимацию их поведения.
Использование дополнительных настроек размера
Используйте дополнительные настройки, если хотите напрямую управлять размерами элемента (например, в пикс., % или vh), а не полагаться на px* и адаптивное поведение.
Дополнительные настройки применяются к выбранному элементу на всех размерах экрана. Для удобства этот режим остается активным для элемента, но его можно отключить в любое время.
Чтобы включить дополнительные настройки:
Выберите нужный элемент.
Нажмите значок «Открыть Инспектор» в правом верхнем углу редактора.
В Инспекторе нажмите значок «Другие действия»
в правом верхнем углу.Активируйте переключатель рядом с пунктом «Дополнительные настройки».
Настройте размеры: ширину, высоту, а также минимальные и максимальные значения.
Совет: Чтобы выбрать другую единицу измерения (например, сменить пикс. на %), нажмите текущую единицу в Инспекторе. Откроется список доступных для элемента единиц измерения.
