Editor X: настройка размера элемента
4 мин. чтения
Editor X переходит на Wix Studio, нашу новую платформу для агентств и фрилансеров.Подробнее о Wix Studio
Используя параметры размера в панели инспектора, вы можете настроить размеры элемента по своему желанию. Введите фиксированные значения ширины и высоты, чтобы задать размеры с точностью до пикселя, или сделайте его плавным, чтобы он легко подстраивался под любой размер экрана.
Содержание:
Хотите узнать больше?
Ознакомьтесь с нашими учебными материалами по подбору размеров элементов (на английском языке) в Академии Editor X.
Структурирование адаптивного сайта
Прежде чем добавлять контент на сайт, важно создать структуру и логично выстроить слои на странице. Слои организованы в соответствии с моделью родительских и подчиненных элементов, что означает, что верхний слой действует как родительский для нижнего слоя.
Наглядный пример
Размер родительского элемента может влиять на его дочерние элементы, поскольку они меняют размер относительно родительского элемента. Чтобы дизайн оставался адаптивным, определите размер и расположение слоев сверху вниз.
Работа с экранами разных размеров:
Вы можете установить разные параметры размера для ваших элементов для каждого размера экрана.
Закрепленные и гибкие размеры
При изменении размера элемента вы можете выбрать, следует ли использовать закрепленный или гибкий размер в Инспекторе :
- Закрепленный: этот параметр сохраняет ширину элемента одинаковой для всех вьюпортов. Он не сжимается и не растет в зависимости от размера экрана.
- Гибкий: этот параметр регулирует ширину, а иногда и высоту элементов в зависимости от размера экрана.
- Масштабировать пропорционально: установите этот флажок, чтобы высота и ширина элемента сохраняли соотношение при изменении размера. Когда этот параметр не выбран, это означает, что ширина элемента регулируется в соответствии с размером экрана, а его высота остается неизменной.
Совет:
Вы также можете перетащить ручки вокруг элемента, чтобы изменить его размеры.
Доступные единицы измерения
В Editor X вы можете использовать различные единицы измерения CSS для изменения размера элементов. Тип измерений, которые вы хотите использовать, зависит от того, как вы хотите изменять размер элементов при изменении ширины вьюпорта.
Нажмите ниже, чтобы узнать о каждой единице измерения и о том, когда ее использовать:
Авто
Пиксели (px)
Проценты (%)
Ширина вьюпорта (vw)
Высота вьюпорта (vh)
Мин. и макс. значения
Макс. контент (max-c)
Расчет размеров элементов
Вы можете использовать расчеты, когда вам нужно точно определить размер элемента с использованием гибких единиц измерения. Используя математические принципы, вы можете написать «формулу», которая определяет ширину или высоту элемента. В этом расчете вы даже можете комбинировать различные измерения (например, vh и px).
Как это сделать?
в верхней части Editor X. Например, используйте вычисление для создания заголовка (100 px) и раздела, которые вместе занимают точную высоту области просмотра (100 vh) для каждого размера экрана. Вы можете установить высоту раздела (100vh - 100px), чтобы при расчете всегда учитывался заголовок (100px).
Растягивание элементов
Растяните элемент, чтобы покрыть весь фон его родительского контейнера. При использовании сеток вы можете растянуть элемент, чтобы покрыть определенную ячейку или всю область сетки.
Растягивание элемента устанавливает его ширину и высоту на Авто, чтобы элемент и его контейнер изменяли размер в соответствии с вьюпортом. Поскольку элемент растянут, его значения ширины и высоты будут такими же, как у его родительского контейнера.
Дополнительная информация
Узнайте больше о создании адаптивного сайта с помощью инструментов Editor X:
Была ли статья полезна?
|