Телефон и планшет: адаптив и предпросмотр

Адаптив и предпросмотр

1. 1Редактор
2. 2Верхняя панель
3. 3Телефон / планшет

Пример: уменьшить заголовок на телефоне

1. Перейдите в Продвинутый режим. Выберите «Компьютер» в шапке, выделите заголовок и задайте размер 48 px в разделе «Текст».
2. Переключитесь на «Планшет» и задайте тому же заголовку 36 px. Затем на «Телефон» — 28 px.
3. Переключитесь между устройствами: размер должен быть 48, 36 и 28 px соответственно. Проверьте переносы, расстояние до кнопки и высоту блока.
4. Если телефонная правка не нужна, нажмите «Сбросить правки для этого экрана». Заголовок на телефоне станет 36 px: он снова наследует планшет. Компьютер останется 48 px.

Как работает наследование

• Компьютер — основа. Планшет наследует компьютер, телефон — планшет и затем компьютер для свойств без собственного значения.
• Планшетная правка влияет и на телефон, если у телефона нет собственного значения этого свойства. Правка телефона не меняет планшет и компьютер.
• Сброс удаляет адаптивные правки выбранного элемента для текущего устройства. После него снова действуют унаследованные значения; это не всегда компьютерный вид.
• Размеры, положение и поддерживаемые свойства оформления могут отличаться по устройствам. Добавление, удаление и переписывание содержимого меняют общую страницу. Для разных текстов нужны отдельные элементы с настроенной видимостью.
• Пороги диапазонов задаются полями «Mobile до» и «Tablet до» в пикселях. Меняйте их, только если нужен другой момент переключения раскладки.

Видимость на устройствах

1. Выделите элемент и откройте раздел «Видимость» в правой панели свойств.
2. Нажмите на нужное устройство: красный означает «скрыт», зелёный — «виден». Например, скройте декоративную подпись только на телефоне.
3. Переключите предпросмотр на это устройство и проверьте результат. Скрытый элемент сохраняет место в раскладке, поэтому при необходимости скорректируйте оставшийся отступ.

Проверить страницу целиком

• Кнопки «Компьютер», «Планшет», «Телефон» показывают соответствующий диапазон. Поле ширины предпросмотра позволяет проверить промежуточные ширины; изменение только ширины не переписывает страницу.
• «Предпросмотр сайта» в меню «Вид» скрывает инструменты; Esc закрывает его. Прокрутите до подвала и проверьте меню, формы и кнопки.
• Анимации в редакторе по умолчанию выключены. Для проверки включите их в меню «Вид» или откройте опубликованный сайт.
• После публикации откройте сайт на настоящем телефоне: проверьте читаемость, отсутствие горизонтальной прокрутки и удобство нажатия кнопок.