Понимание единиц CSS (и как их использовать)

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

Divi 5 приносит нативную поддержку подразделений CSS прямо в строитель. Благодаря новой функции Advanced Units вы можете использовать %, EM, REM, VW и многое другое без пользовательского кода.

Что такое единицы CSS?

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

Например, ширина написания: 100 ничего не значит для браузера. Но добавьте устройство, например, 100px или 100%, и теперь он точно знает, что вы хотите.

Возьмите этот пример с четырьмя коробками, каждый из которых использует различное значение CSS:

• Первый использует ширину: 100. Технически недействительная, но многие браузеры будут делать его на 100%.
• Второй (100px) использует фиксированную ширину.
• Третья и четвертая (100% и 60%) шкала относительно родительского контейнера.

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

Ширина: 100 игнорируется браузером, потому что ему не хватает единицы. Но в этом случае коробка все еще простирается через контейнер не потому, что CSS был принят, а потому, что элементы на уровне блоков, такие как Div, естественно, по умолчанию. Это совпадение поведения по умолчанию, а не результат неверного интерпретации CSS как 100%.

Популярные единицы CSS

Хотя PX и % обычно появляются, многие другие так же полезны, когда вы знаете, когда их использовать:

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

Но сначала полезно знать, что все подразделения CSS делятся на два основных типа: абсолютный и относительный.

Абсолютные и относительные единицы

Понимание разницы имеет важное значение, если вы хотите, чтобы ваш макет хорошо работал в разных размерах экрана.

Абсолютные единицы

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

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

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

Относительные единицы

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

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

• % масштаба с родительским контейнером.
• EM корректирует на основе размера шрифта родительского элемента.
• REM следует за корневым размером шрифта страницы.
• VW и VH реагируют на ширину и высоту видового сообщения браузера.

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

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

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

width: 100%;

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

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

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

Когда использовать, какой блок CSS

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

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

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

Вот несколько примеров, которые можно было бы направить ваш выбор:

• Используйте PX, когда вам нужен точное управление, например, для размеров значков. Поскольку это не адаптируется, избегайте его ширины или текста.
• Используйте %, когда вы хотите, чтобы элементы масштабировались с их контейнером.
• Используйте их, когда вы хотите, чтобы интервал для масштаба масштабировался с размером шрифта родительского элемента.
• Используйте REM (обычно называемый root em), если вы хотите последовательных размеров на вашем сайте. Поскольку он основан на корневом размере шрифта, он поддерживает расстояние и типографику предсказуемо.
• Используйте VW и VH для полноэкранных разделов, областей героев или расстояния, который напрямую реагирует на просмотр (весь вид экрана вашего устройства).

Для более продвинутого контроля вы также можете объединить единицы, используя функции CSS. Calc () удобен при смешивании значений, таких как 1Rem + 5VW для реагирования с минимальным основанием. И Clamp () идеально подходит для установки значений жидкости, которые растут или сокращаются между пределами, что делает его более чистой альтернативой для медиа -запросов.

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

Передовые подразделения Divi построить ответственность без кодирования

Мы уже видели, как подразделения CSS дают вам контроль над поведением макета. Divi 5 принимает этот контроль и делает его легким использовать с продвинутыми единицами.

Подписаться на наш канал на YouTube

Благодаря нативной поддержке %, EM, REM, VW и VH, встроенным непосредственно в застройщика, вы можете применить реальные значения CSS к модулям, разделам, расстоянию и типографии, без необходимости открывать панель кода. В любом численном поле просто выберите предпочтительную единицу из раскрывающегося блока, настройте значение и посмотрите в прямом эфире.

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

Нужен размер шрифта, который плавно масштабируется по разным размерам экрана? Используйте Clamp (). Хотите компенсировать расстояние с сочетанием фиксированных и гибких значений? Попробуйте calc (). Диви обрабатывает все это, мгновенно и заметно.

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

Узнайте все о передовых подразделениях Divi 5

Компания CSS идеально синхросинизируется с расширенными рабочими процессами Divi

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

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

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

1. Создать логику макета с переменными дизайна

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

Вы можете создавать повторно используемые значения, такие как-картинг или –-сечение, используя реальные единицы CSS, такие как 2Rem, 5VW или даже формулы, такие как Calc (2Rem + 1VW). После установки эти значения могут быть применены для модулей, строк и секций, чтобы все было последовательным.

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

2. Используйте Clamp () и Calc () визуально

CSS функционирует, такие как Clamp () и Calc (), помогут вам создать отзывчивые макеты. Они позволяют вам определить гибкие значения, которые регулируют размеры экрана без написания медиа -запросов. Таким образом, вместо установки фиксированных размеров для каждого устройства вы можете писать логику, такую как зажим (1Rem, 2VW, 2,5Rem), чтобы позволить браузеру масштабировать вещи плавно между установленными пределами. Или используйте Calc (100VH - 80PX), чтобы настроить раздел героев на основе высоты вашего вида.

Обычно они требуют написания CSS вручную. В Divi вы можете ввести их непосредственно внутри любого поля числа.

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

3. Сохранить логику блока с помощью предварительных настроек группы опционов

После того, как вы настроите макеты с использованием расширенных единиц или формул, вам не нужно снова их перестроить. Divi позволяет вам сохранить свою логику стиля, включая такие вещи, как заполнение: Clamp (1Rem, 3VW, 2Rem), в качестве предустановки группы опционов.

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

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

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

Divi превращает единицы CSS в визуальную сверхдержаву

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

Готовы попробовать? Загрузите Divi 5 и начните использовать настоящие единицы CSS в ваших дизайнах.