Разница между абсолютными и относительными единицами CSS

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

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

Объясненные подразделения CSS: почему они имеют значение для вашего сайта?

Устройства CSS контролируют, насколько велик все на вашем сайте. Выберите неправильно, и ваш дизайн ломается на разных устройствах.

Большинство людей используют пиксели, потому что они просты и легко понять. Но пиксели не очень хорошо адаптируются к адаптивному дизайну. Они требуют медиа -запросов или функций CSS, таких как Clamp (), чтобы ответить на изменения экрана.

Другие единицы адаптируются автоматически. Единицы Viewport масштабируются с окном браузера. Относительные единицы, такие как размер EM, основаны на окружающем тексту. Различные единицы решают разные проблемы. Выберите хорошо, и ваш дизайн адаптируется на устройствах без дополнительной работы.

Разрушение абсолютных единиц: когда фиксированные размеры работают лучше всего

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

Пиксели (PX) Управляют этим пространством. Существуют другие абсолютные подразделения, такие как сантиметры, миллиметры и дюймы, но они принадлежат к дизайну печати, где физические измерения имеют значение. Для веб -дизайна пиксели обрабатывают практически все абсолютные измерения, которые вам понадобятся.

Почему пиксели отлично работают для мелких деталей

Некоторые элементы дизайна нуждаются в точном управлении. Граница с 1 пикселем должна выглядеть четкой и худой везде. Drop Shadows нуждается в точности, чтобы выглядеть правильно. Маленькие иконки работают лучше, когда они остаются последовательными на всех устройствах.

Пиксели отлично работают для этих крошечных деталей. Ваша пуговица должна быть толщиной 2 пикселей, что тонкая тень должна составлять ровно 4 пикселя, а ваш значок навигации должен составлять ровно 24 пикселя для идеального выравнивания.

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

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

Создание пикселей отвечать на медиа -запросы

Пиксели не совсем жесткие. СМИ запросы позволяют вам поменяться различными значениями пикселей на различных размерах экрана. Ваша заголовка может использовать 32-пиксельный текст на рабочем столе, а затем перейти на 28 пикселей на планшетах и 24 на телефонах.

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

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

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

Понимание относительных единиц: гибкий подход к веб -дизайну

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

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

Как эм -подразделения строятся друг на друга

EM -единицы относительно размера шрифта их непосредственного родительского элемента. Если ваш базовый размер шрифта составляет 16px, и вы устанавливаете контейнер на размер шрифта: 1.25EM, это становится 20px. Дочерний элемент внутри IT, установленный на 1,5 EM, теперь составит 30px (1,5 × 20px), а не 24px, потому что он основан на родителе, а не на корне.

Этот составной эффект является мощным для масштабируемого расстояния вокруг текста. Но если вы продолжаете гнездовать элементы с размерами шрифтов на основе EM, ваши значения могут быстро увеличиться. EM -единицы лучше всего подходят для прокладки, маржи или элементов, тесно связанных с близлежащим текстом. Для последовательного размера в вашем макете подумайте об использовании REM.

Подразделения REM сохраняют простые вещи

REM всегда смотрит на элемент root HTML. Установите что -то на 2Rem, и это одинаковый размер повсюду на вашей странице.

Большинство браузеров по умолчанию до 16px для корня. Итак, 1Rem = 16px, 2Rem = 32px. Измените размер корня, и все на основе REM масштабируются вместе.

Подразделения ViewPort следуйте по вашему экрану

Единицы Viewport масштабируются с окном браузера. 50VW = половина ширины экрана и 100 В / полная высота экрана. Это отлично подходит для разделов героев, которые заполняют экран.

Мобильные браузеры обычно плохо играют с подразделениями Viewport. Адресная полоса прячется и показывает, когда вы прокрутите, и ваш раздел 100VH может быть отрезан, когда появляется адресная строка.

Vmin и Vmax сравнивают ширину и высоту вашего экрана, затем выберите один. Вмин использует то, что меньше. На телефоне, удерживаемом в вертикальном положении ширина меньше, поэтому 50 Вмин = 50% от ширины. Поверните в ландшафт, и высота становится меньше, поэтому 50 Вмин переключается на 50% от высоты. Vmax делает наоборот: он всегда выбирает большее измерение. Это полезно для элементов, которые должны масштабироваться с большим измерением.

Проценты адаптируются к контейнерам

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

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

Разница

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

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

Выбор правильных единиц для вашего дизайна

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

Сначала подумайте о своих пользователях

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

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

Многие пользователи меняют размер шрифта своего браузера для лучшей читаемости. Когда вы жестко кодируете пиксели, вы игнорируете их предпочтения. Если кто-то увеличивается до 125%, ваш макет на основе пикселей разваливается. Относительные единицы адаптируются автоматически.

Быстрые способы выбрать правильный блок

Вот как разбить свой выбор, не теряя в деталях:

• Текст и расстояние вокруг него: используйте их или rem. Кнопки накладки шкалы с размером текста. Поля остаются пропорциональными заголовкам.
• Элементы, связанные с экраном: используйте единицы Viewport. Герой секции, которые заполняют большинство экранов. Боковые панели, которые занимают определенные проценты экрана.
• Элементы, нуждающиеся в точном управлении: используйте пиксели. Тонкие границы, которые остаются хрустящими. Маленькие иконы с идеальным выравниванием. Отбросить тени с точными смещениями.
• Элементы на основе контейнеров: проценты использования. Гибкие сетки, которые адаптируются к родителям. Изображения, которые масштабируются с контейнерами.

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

Общие ошибки единицы CSS, чтобы избежать

Вы выбираете пиксели для всего, потому что они чувствуют себя в безопасности. Ваша кнопка идеально подходит в ширину 75 пикселей на вашем ноутбуке. Затем кто -то открывает ваш сайт на своем телефоне, и эта же кнопка ест половину экрана. Ваш логотип нуждается в точных размерах, но ваши области контента нуждаются в гибкости. Смешайте эти подходы случайным образом, и вы создаете хаос. Итак, вот несколько советов по избежанию стандартных ошибок подразделений CSS:

1. Выбор пикселей для всего

Пиксели чувствуют себя в безопасности, потому что 20 пикселей означает 20 пикселей. Просто, верно? Ваша боковая панель шириной 300 пикселей отлично работает на рабочем столе. На мобильных устройствах это становится огромным блоком, который раздавит ваш контент в тонкую полосу. Ваш 16-пиксельный текст становится нечитаемым на экранах высокой плотности.

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

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

2. EM -единицы, которые размножаются из -под контроля

EM -единицы масштабируются на основе размера шрифта их родителей. Это звучит гибко, пока вы не начнете гнездясь. Скажем, ваш контейнер использует 1.2EM, а ваш заголовки внутри использует 1,5 EM. Этот заголовок становится 1,8 эм по сравнению с корнем, потому что 1,2 × 1,5 = 1,8. Продолжайте гнездовать, а размеры могут снежок. Измените один родительский размер шрифта, и все вниз по течению сдвига.

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

3. Подразделения Viewport, которые прыгают на мобильном телефоне

Установите раздел своего героя на 100VH, и он прекрасно заполняет экран. За исключением того, что мобильные браузеры скрывают и показывают свои адресные полосы при прокрутке. Сафари на iOS и Chrome на Android все это делают. Когда адресная стержня исчезает, ваш участок 100VH внезапно становится слишком высоким. Когда он появляется, ваш контент отрезается.

Более новый блок DVH адаптируется к изменяющемуся размеру просмотра. Однако поддержка браузера все еще догоняет. В качестве запасного, решение JavaScript с использованием CSS Custom Properties работает.

Разрыв доступности с фиксированными размерами

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

Рекомендуется, чтобы целевые показатели были не менее 44 × 44 пикселей CSS, в соответствии с рекомендациями доступности, такими как стандарты WCAG и Apple. Меньшие цели могут быть сложными для пользователей с двигательными нарушениями, чтобы точно использовать.

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

5. Крошечный текст на экранах высокой плотности

Различные устройства упаковывают пиксели по -разному. Экран вашего телефона может иметь 400 пикселей на дюйм, в то время как ваш монитор имеет 100. Один и тот же счет пикселей выглядит совершенно по -разному на каждом устройстве.

Ваш 14 пиксельный текст отлично смотрится на рабочем столе. На экране телефона высокой плотности те же 14 пикселей становятся микроскопическими. Пользователи прищущаются и укоренили, чтобы увеличить.

Операционные системы и браузеры обрабатывают масштабирование автоматически при использовании относительных единиц. Ваш текст 1REM становится больше на экранах высокой плотности и меньше на низкой плотности.

6. Смешивание единиц без плана

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

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

Как продвинутые подразделения Divi 5 упрощают управление CSS

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

Что такое Диви?

Divi - это строитель веб -сайтов, который превращает WordPress в нечто, что действительно имеет смысл для людей, которые хотят, чтобы их сайты выглядели хорошо.

Перетащите любой из 200+ модулей вокруг вашей страницы. Измените текст прямо там, где он находится. Выберите новые цвета и посмотрите, как они появляются сразу. Вы работаете над реальной вещью, а не каким -то режимом предварительного просмотра, который вам лежит.

Тема включает в себя 2000+ макетов, которые не отстой. Настоящие дизайны для ресторанов, фотографов, консультантов и десятков других предприятий. Найдите тот, который вам нравится, и настраивайте его, пока он не станет правильным.

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

Создавать веб -сайты с помощью ИИ

Divi AI работает прямо в вашей области дизайна. Нужен текст? Это пишет это.

Хотите изображения? Это делает их. Вы даже можете описать фото редактирования, и это обрабатывает работу.

Аналогично, для кода и новых разделов.

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

Или опишите свой бизнес на Divi Quick Sites + Divi AI и позвольте ему построить что -то с нуля.

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

Что нового в Divi 5

Divi 5 восстанавливает все с нуля. Мы откинули старую систему шорткодов и построили что -то, что лучше работает с сегодняшними веб -стандартами. Сайты загружаются быстрее, редактор отвечает быстрее, и вы получаете доступ к инструментам, которые были невозможны раньше.

Но что нового? Посмотрите:

Система макета Flexbox

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

Опционные группы пресетов

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

Проектные переменные

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

Продвинутые единицы

Теперь вы можете использовать все расширенные подразделения CSS с Divi 5: от PX до VW/VH. Функции CSS также сейчас работают прямо сейчас в строителе. Хотите раздел, который составляет 80% высоты экрана минус ваш заголовок? Тип Calc (80VH - 100px), и вы настроены. Интерфейс обрабатывает Clamp (), min (), max (): все эти отзывчивые трюки.

Вложенные ряды

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

Редактирование одного щелчка

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

Настраиваемые точки останова

Вместо того, чтобы застрять с тремя, настраиваемые точки останова Divi 5 позволяют включить семь различных размеров экрана. Установите каждую точку останова, где он нуждается в вашем дизайне, будь то 1200px для больших мониторов, 900px для планшетов или 650px для телефонов.

Многопанельное рабочее пространство

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

Управление атрибутами

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

Масштаб холста

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

Улучшение производительности

Теперь все кажется более хрустящим. Страницы загружаются быстрее, строитель реагирует быстрее, и сложные макеты не сбивают с собой интерфейс, как раньше.

Модульные группы

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

HSL Color System

Постройте цветовые схемы с оттенком, насыщением и управлением легкостью. Создайте вариации цвета бренда, которые выглядят профессионально. Математика создает приятные комбинации автоматически.

Больше уже в пути ...

• Строитель петли: сборка построения для повторяющегося контента, такого как сетки блогов или списки продуктов. Разработайте его один раз, пусть система заполнит ее вашим фактическим контентом.
• Модули Woocommerce: модули для сетей для сетей, отдельные страницы продукта и функциональность корзины. Все, что нужно интернет -магазинам, построено специально для продажи.

Использование переменных CSS в Divi 5

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

Divi 5 принимает любую единицу CSS непосредственно в своих входных полях. Напишите REM, VW или процентные значения, где вы ранее могли использовать только пиксели. Строитель обрабатывает эти единицы немедленно без дополнительной настройки.

Функции CSS работают так же. Введите зажим (1Rem, 4VW, 3Rem) для типографии жидкости или мин (500px, 90%) для отзывчивой ширины. Визуальный строитель обрабатывает эти вычисления в режиме реального времени по мере разработки.

Переменные интегрируются с этой системой. Определите переменную CSS, как-Header-Height: 80px, затем ссылайтесь на ее с помощью VAR (–Header-hight) в любом поле. Divi распознает синтаксис и автоматически применяет ваше сохраненное значение.

Эта прямая интеграция означает, что вы можете смешивать традиционные единицы, современные функции CSS и переменные в одном и том же проекте. Используйте пиксели для границ, единиц Viewport для разделов и переменных для повторных измерений.

Проектные переменные: лучший способ применения расширенных единиц

Проектные переменные-встроенная альтернатива Divi 5-альтернативу переменным CSS. Они работают полностью через визуальный интерфейс, не требуя каких -либо знаний кода. Вы создаете и управляете этими переменными, используя панель диспетчера переменных Divi.

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

Divi 5 предлагает несколько типов переменных для удовлетворения различных потребностей контента:

• Цветовые переменные хранят шестигранные коды, градиенты, цвета марки, цвета текста, фон и границы.
• Переменные шрифта управляют типографикой по всему миру за пределами ограничений по настройке тем и работают для любых текстовых областей.
• Номерные переменные принимают любые функции CSS плюс CSS, такие как Clamp (), Calc (), min () и max () для расстояния, размеров и анимации.
• Переменные изображения хранят многоразовые изображения, такие как логотипы, фон и шаблоны.
• Текстовые переменные хранят многоразовые текстовые строки, такие как контактная информация, слоганы и деловые данные.
• Переменные URL хранят повторные ссылки для социальных сетей, аффилированных лиц, промо и ссылки на TELTO.

Настройка единиц CSS с переменными проектирования номеров

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

Найдите менеджер переменной в вашем интерфейсе Divi. Создайте новую переменную номера и дайте ей значение, которое соответствует вашему дизайну. Используйте прозрачные имена, такие как «Кнопкие кнопки» или «размолчание секции» вместо расплывчатых этикеток.

Создание вашей библиотеки переменных

Вы можете добавить общие переменные, такие как:

• «Кнопка» на 3Rem-кнопки масштабируются с размером текста
• «Секция» при 8VH-расстояние адаптируется к высоте экрана
• «Граница-радий» при 0,511-округлые углы остаются пропорциональными
• «Герой-высота» на 75VH-секции героев заполняют большинство экранов
• «Тонкий график» на 1PX-четкие линии остаются острыми
• «Жидкий текст» в зажиме (1Rem, 2,5VW, 2Rem)-текстовые шкалы плавно
• «Ширина контента» на мине (90%, 1200px)-контейнеры остаются читаемыми
• «Динамический заглушка» в Calc (2Rem + 2VW)-расстояние растет с размером экрана

Примените их в своем модуле, разделе или настройках строки.

Ваши переменные REM масштабируются с размером текста. Единицы VH адаптируются к меньшим экранам. Переменные с помощью зажима () Настройка автоматически между вашими минимальными и максимальными значениями.

Здание подключенные пресеты

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

Когда вы применяете это предустановку к другим модулям, они наследуют одинаковый интервал на основе переменных. Обновите «Card-Padding» от 2Rem до 3Rem в диспетчете переменных, и каждый элемент использует этот заданный обновления автоматически.

Престут остается прежней, но значения меняются. Это работает для всех переменных дизайна: цвета, шрифты, изображения, текст и URL. Ваши пресеты становятся динамичными, а не статичны, что делает возможными обновления по всему сайту с одним изменением.

Создайте лучшие веб -сайты с подразделениями CSS и Divi 5

Получение правильных единиц CSS меняет то, как вы создаете веб -сайты. Вы установите меньше сломанных макетов и создаете дизайн, которые работают на устройствах. Pixels Nail Точные детали. Относительные единицы адаптируются к различным экранам и пользовательским предпочтениям.

Divi 5 делает здание с передовыми единицами CSS на бриз. Введите любое устройство в строитель и мгновенно увидите результаты. Проектные переменные сохраняют измерения согласованными на вашем сайте. Измените одно значение и все подключенные обновления автоматически.

Ваши веб -сайты заслуживают лучшего, чем сражения с остановами и бесконечными исправлениями макета. Попробуйте Divi 5 и посмотрите, как подразделения CSS превращают разочаровывающие дизайнерские сеансы в гладкие рабочие процессы.