Что такое зажим () в CSS (и как его использовать)

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

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

В этом посте мы объясним, как работает Clamp (), почему он часто может быть более эффективным, чем медиа -запросы, и как Divi 5 позволяет вам использовать его, не написав ни одной строки кода!

Что такое зажим ()

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

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

font-size: clamp(40px, 7vw, 100px);

Здесь размер шрифта никогда не сойдет ниже 40 пикселей, масштабируется на основе 7% ширины просмотра, и прекратить расти, как только он достигнет 100px.

Еще одним большим преимуществом использования Clamp () является то, что, в отличие от медиа -запросов, он избегает жестких прыжков и сохраняет ваши стили более предсказуемыми и читаемыми.

Что мы имеем в виду под этим? Давайте поймем это, сравнивая зажим () с медиа -запросами.

Сравнение зажима () и медиа -запросов

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

Этот метод работает, но он не плавно. От 1000 пикселей до 501px размер шрифта остается заблокированным на уровне 100 пикселей. В тот момент, когда экран достигает 500px, шрифт резко падает до 30px. Это означает отсутствие плавного перехода, только резкое изменение.

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

Напротив, Clamp () спасает вас от резких переходов и длительного кода. Фактически, это может быть написано в одной строке: размер шрифта: зажим (30px, 7vw, 100px).

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

В живом действии, вот как выглядит сравнение между изменением размера шрифтов с точками перерыва в СМИ и Clamp ():

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

Как Clamp () функционирует за кулисами

CLAMP () принимает три значения, которые работают вместе, чтобы масштабировать любое свойство CSS:

 clamp(minimum, preferred, maximum) 

Каждая часть функции играет определенную роль:

• Минимальное значение: наименьшее возможное значение. Элемент не будет масштабироваться ниже этой точки, независимо от того, насколько маленьким назой экрана.
• Предпочтительное значение: это значение масштабируется на основе размера экрана. Обычно он устанавливается с использованием относительных единиц, таких как VW или выражение Calc (), чтобы обеспечить свободную текучесть.
• Максимальное значение: самый высокий допустимый размер. Даже на очень больших экранах элемент не будет превышать это значение.

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

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

Выбор правильной предпочтительной ценности

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

Во -первых, это не должно быть фиксированным значением, таким как зажим (40px, 80px , 120px), потому что в этом случае предпочтительное значение вообще не масштабируется. Поскольку 80px уже падает между пределом, браузер блокирует его и игнорирует изменения размера экрана. Это приводит к статическому значению, которое в первую очередь побеждает цель использования Clamp ().

Вместо этого предпочтительное значение всегда должно быть относительным , как в зажиме (40px, 7VW , 120px). Здесь 7VW отвечает на ширину просмотра, что позволяет элементу плавно масштабироваться по размерам экрана. Затем функция зажима гарантирует, что он никогда не опускается ниже 40% или выше 120px, сохраняя размер отзывчивого к 7% от ширины экрана.

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

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

Различные типы единиц в зажиме ()

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

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

Тем не менее, вы также можете использовать относительные единицы для значений MIN и MAX, таких как зажим (2Rem, 4Rem, 8Rem). Это делает ваш дизайн более доступным и проще в масштабировании, если изменится размер корневого шрифта. Это особенно полезно для пользователей, которые настраивают настройки браузера для читаемости.

зажим () в Divi 5

Функция Clamp () в CSS невероятно полезна, но только если вам удобно писать код. Как насчет тех, кто предпочитает создавать свои сайты визуально, не касаясь таблицы стилей? Хотели бы вы создать макеты жидкости, используя Clamp (), но без написания кода?

Если это так, продвинутые подразделения Divi 5 могут помочь.

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

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

Просто нажмите в поле «Вход», чтобы выбрать из различных расширенных единиц, доступных в Divi 5 (см. Список темного цвета рядом с размером текста заголовка) , измените тип блока и определите свои минимальные, предпочтительные и максимальные значения.

И это все! Нет кодирования или CSS вообще - все, что вы сделали, это входило в значение зажима (), и ваш заголовок стал плавным.

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

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

Как использовать Clamp () в Divi 5?

К настоящему времени вы видели, как легко использовать Clamp () в Divi 5. Вы просто выбираете блок Clamp () и добавляете предпочтительные значения. Нет пользовательского кода, нет файлов CSS, просто чистый, визуальный интерфейс.

Но то, что делает Clamp () по -настоящему мощным внутри Divi, не только сама функция. Это то, с чем он работает.

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

Clamp () работает с переменными дизайна

Лучший, наиболее эффективный способ эффективного использования зажима () в Divi 5 - это объединить его с проектными переменными.

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

Например, вы определяете размеры Clamp () для заголовков H1-H6, как это:

И сохранить их внутри менеджера переменной в Divi Builder:

Тогда все ваши заголовки по всему веб -сайту будут адаптироваться на основе ваших значений Clamp ().

Теперь, если вы хотите обновить размер H3, просто измените его переменную номера, и он будет обновляться везде, где вы его использовали. ( Хотите создать свою собственную систему типографии в Divi 5? Вот полное руководство по управлению шрифтами и размерами шрифтов с использованием переменных Clamp () и дизайна.)

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

CLAMP () в сочетании с CALC ()

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

Например, размер шрифта: зажим (1Rem, Calc (0,75Rem + 2VW), 2,5Rem) использует CALC () для добавления стабильной основы (0,75REM), а затем масштабировать его с помощью 2VW.

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

Практические случаи использования зажима ()

Теперь давайте посмотрим на некоторые общие случаи использования зажима () и насколько легко становится, когда вы применяете его с Divi 5:

1. Постоянные размеры заголовков на всех устройствах

Адаптивная типография - лучший случай использования Clamp (). Поскольку мы уже определили наши размеры заголовка (H1-H6) с использованием зажимного () в проектных переменных, пришло время увидеть их в действии.

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

Текст остается ясным, сбалансированным и визуально последовательным во всех наших определенных отзывчивых точках останова.

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

2. Установите ширину Clamp () для разделов абзаца на больших экранах

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

Чтобы исправить это, установите отзывчивую ширину, такую ​​как зажим (300px, 65VW, 800px), чтобы масштабировать ваш абзац до фиксированной ширины (800px), чтобы абзацы кажутся читаемыми даже на более широких экранах.

Это идеальный способ сделать ваши посты в блоге на более широких экранах.

3. set clamp () ширина для одиночных или представленных изображений

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

Чтобы исправить это, используйте ширину изображения на основе зажима, такую ​​как зажим (300px, 60 ВВт, 1000px). Он гарантирует, что изображение растет плавно с размером экрана, но останавливается, прежде чем доминировать над макетом.

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

4. Добавьте жидкость и маржу с зажимом ()

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

Например, зажим (0,5Rem, 2VW, 2Rem) и зажимной (1Rem, 3VW, 4Rem) в галерее изображений, создают пространство, которые начинаются с малого и масштабного с экраном.

Это дает вам место для макета, чтобы дышать на больших экранах и сохраняет вещи на мобильных устройствах:

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

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

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

Применение этих значений теперь легко.

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

Проектируйте пиксельные идеальные макеты с использованием clamp (), не написав ни одной строки кода

Clamp () помогает вам разрабатывать жидкие, отзывчивые макеты, не полагаясь на бесконечные медиа -запросы. А с Divi 5 вам не нужно писать ни одной строки кода, чтобы использовать его. Независимо от того, предпочитаете ли вы кодирование или наслаждайтесь визуальным дизайном, продвинутые подразделения Divi облегчают применение зажима () к шрифтам и расстоянию.

С такими мощными функциями, как Clamp (), так легко доступно, разве вы не хотите попробовать Divi 5 для себя? Проверьте различные значения, создайте свою собственную адаптивную систему и посмотрите, насколько гибкими могут стать ваши макеты. И когда у вас есть любимый трюк Clamp (), поделитесь им в комментариях ниже! Мы хотели бы увидеть, что вы создаете.