Как сделать Vertical Rhythm адаптивным с помощью сменных CSS и CSS Calc

1656659654 kak sdelat vertical rhythm adaptivnym s pomoshhyu smennyh css i

от Zell Liew

23bIOS9matiEsSwoz6jxI3CqRF4C-GR3T2UR
Фото Сэмюэля Зеллера на Unsplash

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

Раньше было невозможно изменить вертикальный ритм в разных окнах просмотра, поскольку у нас не было соответствующих инструментов. Но теперь благодаря CSS Calc и CSS Custom Properties мы можем изменять вертикальный ритм в разных окнах просмотра. В данной статье разъясняется, как.

Расчет единицы ритма

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

/* One rhythm unit would be 20px * 1.4 = 28px */ html {   font-size: 20px;   line-height: 1.4; } 
p {   margin: 28px; }

Расчет единицы ритма становится легче, если вы используете относительные единицы (а вы должны). Одна единица ритма всегда равна размеру основного шрифта, умноженному на высоту строки основного текста.

/* 1 rhythm unit, calculated with rem */ html {   line-height: 1.4; } 
p {   margin: 1.4rem; }

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

/* 2 rhythm units */ h2 {   margin-top: 2.8rem;} 
/* 0.75 rhythm units */ p {   margin-top: 1.05rem;}

Зачем изменять вертикальный ритм в разных окнах просмотра?

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

Еще немного о читаемости.

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

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

/* This is a simple example. See the complete example in the link above */ body {   font-size: calc(1em + 1vw);   line-height: calc(1.2em + 1vw); }

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

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

/* Change line height at different breakpoints */ html {   line-height: 1.4; } 
@media (min-width: 600px) {   html {     line-height: 1.5;   } } 
/* Calculate rhythm again at each breakpoint */ p {  margin-top: 1.4rem; } 
@media (min-width: 600px) {   p {     line-height: 1.5rem;   } }

Изменение единицы ритма с помощью специальных свойств CSS

Специальные свойства CSS (более известные как переменные CSS) можно использовать для создания единицы ритма, изменяющейся в разных окнах просмотра.

Чтобы создать переменную CSS, вы создаете специальное свойство (отсюда ее название) путем добавления -- к собственности.

:root {   --color: red; }

Чтобы использовать созданное вами свойство, вы пишете var(--your-custom-property).

p {   color: var(--color) }

Прекрасная особенность CSS Custom Properties заключается в том, что они могут динамически обновляться в различных медиазапросах.

:root {   --color: red; } 
@media (min-width: 30em) {   :root {     --color: blue;   } } 
p {   color: var(--color) }
BJP2pctUsooBmEcWCUWDtYGdPvz5-H2rlhQW

Это означает, что вы можете создать a --baseline свойства, которые соответствуют одной ритмической единице, то используйте это --baseline в CSS, чтобы создать адаптивный вертикальный ритм.

:root {  --baseline: 1.4;   line-height: var(--baseline) } 
@media (min-width: 30em) {   :root {     /* a value of 3 used here to exaggerate the changes so you can see it in the demo below */   --baseline: 3;   } }
Q2uccjszThe-v8FzxsW6x0paXBTM60xDFJtN

Чтобы создать значение ритма, вам нужно использовать CSS Calc (поскольку вы можете вычислять данные в CSS только с помощью CSS Calc).

/* Two rhythm units */ h2 {   margin-top: calc(var(--baseline) * 2rem); } 
/* 0.75 rhythm units */ p {   margin-top: calc(var(--baseline) * 0.75rem); }
X9Vis5CeEjqSDQTolhdQfuEHmenrGwnCxBlu

Упрощение вычислений с помощью функции

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

// rvr stands for responsive vertical rhythm @function rvr($multiple) {   @return calc(var(--baseline) * $multiple * 1rem); }

Тогда вы можете использовать vr функция, которую вы создали таковой. Гораздо проще! ?.

/* Two rhythm units */ h2 { margin-top: rvr(2); } 
/* 0.75 rhythm units */ p { margin-top: rvr(0.75); }

Как выглядит поддержка?

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

t6Ffa5jxIAGdcxb7zygzW-SARA940IUSwAHw
LPZAHT6FWEz9vbKfOMEKzIH1stAtW8u9ttc1

К сожалению, поддержка как CSS Calc, так и CSS Custom отсутствует в Opera Mini (вместе с некоторыми менее известными браузерами, такими как QQ и Baidu), что является обломом.

Поскольку Opera Mini не поддерживает свойства CSS Calc и CSS Custom, нам нужно предоставлять резервные свойства всякий раз, когда мы создаем единицу ритма. Это немного больше работы, но, к счастью, не нарушает сделку.

:root {   --baseline: 1.4;   /* Line-height fallback */   line-height: 1.4;   line-height: calc(var(--baseline) * 1); } 
@media (min-width: 30em) {   :root {     --baseline: 1.5;   } } 
p {   /* Line-height basic vertical rhythm fallback. */   margin-top: 1.05rem;   margin-top: rvr(0.75); }

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

@function vr($multiple) {   @return 1.4 * $multiple * 1rem; }

Если вы создадите vr функцией, ваш резервный ритм будет проще:

p {   /* Line-height basic vertical rhythm fallback. */   margin-top: vr(0.75);   margin-top: rvr(0.75); }

Примечание: я еще не включил адаптивный вертикальный ритм в Typi. Я надеюсь добавить его, когда у меня будет немного времени.

Подведению

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

Но теперь мы можем создать адаптивный вертикальный ритм с помощью специальных свойств CSS и CSS Calc. Если вы создаете реагирующий вертикальный ритм, убедитесь, что вы предоставили запасной вариант для браузеров, не поддерживающих CSS Custom Properties и CSS Calc!

Спасибо, что прочли. Эта статья как-то помогла вам? Если я сделал это, я надеюсь, что вы подумаете об этом; вы могли бы просто помочь кому-то, кто чувствовал то же, что и вы, прежде чем прочитать статью. Спасибо.

Первоначально опубликовано на zellwk.com.

Добавить комментарий

Ваш адрес email не будет опубликован.