Css vh единица измерения – Как использовать в CSS единицы измерения, связанные с окном просмотра: примеры работы

Единицы измерения CSS, о которых вы должны знать

7 единиц измерения CSS, о которых вы могли не знать

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

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

rem

Начнем с того, что похоже на то, с чем вы, вероятно, уже знакомы. Единица измерения em определяется как текущее значение font-size. Так, например, если вы установите размер шрифта для элемента body, значение em любого дочернего элемента в body будет равно этому размеру шрифта.

<body> <div>Test</div> </body>

<body>

    <div>Test</div>

</body>

7 единиц измерения CSS, о которых вы могли не знать

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

body { font-size: 14px; } div { font-size: 1.2em; // calculated at 14px * 1.2, or 16.8px }

body {

    font-size: 14px;

}

div {

    font-size: 1.2em; // calculated at 14px * 1.2, or 16.8px

}

Здесь мы указали, что у div будет font-size 1.2em. Это в 1,2 раза больше, чем размер шрифта, который он унаследовал, в данном случае 14px. Результат -16.8px.

Тем не менее, что происходит, когда вы каскадом определяете размеры шрифтов друг в друге? В следующем фрагменте мы применяем точно такой же CSS, как и выше. Каждый div наследует размер шрифта от своего родителя, давая постепенно увеличивающиеся размеры шрифта.

<body> <div> Test <!-- 14 * 1.2 = 16.8px --> <div> Test <!-- 16.8 * 1.2 = 20.16px --> <div> Test <!-- 20.16 * 1.2 = 24.192px --> </div> </div> </div> </body>

<body>

    <div>

        Test <!-- 14 * 1.2 = 16.8px -->

        <div>

            Test <!-- 16.8 * 1.2 = 20.16px -->

            <div>

                Test <!-- 20.16 * 1.2 = 24.192px -->

            </div>

        </div>

    </div>

</body>

Хотя в некоторых случаях это может быть желательно, часто вам может потребоваться просто полагаться на одну единицу для сопоставления. В этом случае вы должны использовать rem. «r» в rem означает «root»; это равно размеру шрифта, установленному для корневого элемента; в большинстве случаев это элемент html.

html { font-size: 14px; } div { font-size: 1.2rem; }

html {

    font-size: 14px;

}

div {

    font-size: 1.2rem;

}

Во всех трех вложенных элементах div в предыдущем примере шрифт оценивается как 16.8px.

Хорошо для сетки

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

.container { width: 70rem; // 70 * 14px = 980px }

.container {

    width: 70rem; // 70 * 14px = 980px

}

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

Могу ли я использовать это?

VH и VW

Адаптивные методы веб-дизайна сильно зависят от процентных правил. Однако процент в CSS не всегда является лучшим решением для каждой проблемы. Ширина в CSS соотносится с содержащим родительским элементом. Что если вы хотите использовать ширину или высоту области просмотра вместо ширины родительского элемента? Это именно то, что обеспечивают единицы vh и vw.

Единица vh равна 1/100 высоты окна просмотра. Например, если высота окна браузера 900px, 1vh будет вычисляться, как 9px. Точно так же, если ширина области просмотра 750px, 1vw оценивается как 7.5px.

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

.slide { height: 100vh; }

.slide {

    height: 100vh;

}

7 единиц измерения CSS, о которых вы могли не знать

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

Могу ли я использовать это?

Vmin и Vmax

В то время, как vh и vm всегда относятся к высоте и ширине области просмотра, соответственно, vmin и vmax относятся к максимальному или минимальному из этих значений ширины и высоты, в зависимости от того, что меньше или что больше. Например, если для браузера задана ширина 1100 пикселей и высота 700 пикселей, 1vmin будет 7 пикселей, а 1vmax — 11 пикселей. Однако, если ширина была установлена в 800px, а высота в 1080px, vmin будет 8px, а vmax — 10.8px.

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

.box { height: 100vmin; width: 100vmin; }

.box {

    height: 100vmin;

    width: 100vmin;

}

7 единиц измерения CSS, о которых вы могли не знать

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

.box { height: 100vmax; width: 100vmax; }

.box {

    height: 100vmax;

    width: 100vmax;

}

7 единиц измерения CSS, о которых вы могли не знать

Комбинации этих правил обеспечивают очень гибкий способ использования размера окна просмотра.

Могу ли я использовать это?

ex и ch

Единицы ex и ch, аналогично em и rem, зависят от текущего шрифта и размера шрифта. Однако, в отличие от em и rem, эти единицы также полагаются на font-family, так как они определяются на основе мер шрифта.

Единица ch или единица символа определяются, как «продвинутая мера» ширины нулевого символа, 0. Очень интересное обсуждение того, что это означает, можно найти в блоге Эрика Мейерса, но основная концепция заключается в том, что, учитывая моноширинный шрифт, блок с шириной N символов, например width: 40ch;, всегда может содержать строку с 40 символами в этом конкретном шрифте. Хотя обычное использование этого правила относится к разметке Брайля, возможности для творчества здесь, безусловно, выходят за рамки подобных простых приложений.

Единица ex определяется как «х-высота текущего шрифта ИЛИ половины одного em». Значением x-высоты данного шрифта является высота строчной буквы x этого шрифта. Часто это примерно середина символов шрифта.

7 единиц измерения CSS, о которых вы могли не знать

Х-высота; высота строчной буквы x

Существует множество вариантов использования этого инструмента, большинство из которых предназначены для типографской микро-корректировки. Например, элемент sup, обозначающий верхний индекс, может быть перемещен вверх в строке, используя относительное положение и нижнее значение 1ex. Точно так же вы можете сместить элемент индекса вниз. В браузере по умолчанию для них используются правила vertical-align, относящиеся к верхним и нижним индексам, но если вам нужен более точный контроль, вы можете обрабатывать текст более явно, например:

sup { position: relative; bottom: 1ex; } sub { position: relative; bottom: -1ex; }

sup {

    position: relative;

    bottom: 1ex;

}

sub {

    position: relative;

    bottom: -1ex;

}

Могу ли я использовать это? Единица ex существует с CSS1, хотя такой же твердой поддержки для ch вы не найдете. Для получения дополнительной информации о поддержке, ознакомьтесь с Единицы измерения и значения CSS на quirksmode.org.

Заключение

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

Автор: Jonathan Cutrell

Источник: https://webdesign.tutsplus.com

Редакция: Команда webformyself.

7 единиц измерения CSS, о которых вы могли не знать

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее 7 единиц измерения CSS, о которых вы могли не знать

CSS3. Основы

Прямо сейчас изучите CSS3 с нуля!

Смотреть

Единицы измерения CSS

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

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

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


.one-cm { font-size: 1cm; }
.one-mm { font-size: 1mm; }
.one-in { font-size: 1in; }

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

Типографские единицы

К типографским единицам измерения относятся точки (pt) и пики (pc). Точка (1pt) имеет фиксированный размер 1/72 дюйма, в то время как пика (1pc) равна 1/6 дюйма (1pc = 12pt). Эти две единицы измерения наиболее полезны в стилях, написанных для печатных версий документов, а не для использования на экранах.


.one-point { font-size: 1pt; }
.one-pica { font-size: 1pc; }

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

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


.one-pixel { font-size: 1px; }
.one-percent { font-size: 1%; }

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

Рассмотрим последние модели ноутбуков, планшетов и смартфонов, оснащенные экранами с высоким разрешением. На таких устройствах браузер не соотносит единицу px с количеством физических пикселей на экране. Вместо этого он нормализует единицу px, так чтобы приблизить характеристики просмотра к традиционному настольному монитору с плотностью пикселей в районе от 96 до 120 пикселей/дюйм. В результате квадрат со стороной в 10px может отрисовыватся браузером на смартфоне так, что на каждой стороне окажется от 15 до 20 физических пикселей. Это означает, что px также оказывается относительной единицей измерения.

Шрифтозависимые относительные единицы

Двумя дополнительными относительными единицами измерения являются em и ex. Em - высота текущего шрифта, ex - высота символа "х" в нижнем регистре указанного шрифта.


.one-ex { font-size: 1ex; }
.one-em { font-size: 1em; }

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

В CSS3 введены две дополнительные единицы измерения: rem и ch. Rem - размер шрифта корневого элемента (<html>), она может использоваться вместо em для предотвращения влияния размеров шрифта родителя или предков на размер шрифта текущего элемента.


.one-rem { font-size: 1rem; }

Единица ch равна ширине символа ноль (0) шрифта элемента. Ее использование может быть полезным для определения ширины поля, содержащего текст, потому что 1ch примерно соответствует одному символу.


<div>00000</div>

Единица ch поддерживается только в Chrome 27+, Firefox 19+ и IE9. Rem поддерживается в Chrome 4+, Firefox 3.6+, IE9+, Safari 4.1+ и Opera 11.6+.

Единицы области просмотра

К единицам измерения области просмотра относятся vw (ширина) и vh (высота), позволяющие масштабировать элементы относительно области просмотра, то есть видимой части веб-страницы.


width: 50vw; /* 50% от ширины области просмотра */
height: 25vh; /* 25% от высоты области просмотра */

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


width: 1vmin; /* 1vh или 1vw, в зависимости от того что меньше */
height: 1vmax; /* 1vh или 1vw, в зависимости от того что больше */

Единицы измерения относительные области просмотра поддерживаются в Chrome 26+, Firefox 19+, IE11+, Safari 6.1+ и Opera 15+.

Значения единиц измерения

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


p { font-size: 0.394in; } /* десятичная дробь */
p { margin: -1px; } /* отрицательное значение */

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


p { font-size: 1ex; }   /* корректно */
p { font-size: 0; }     /* корректно */
p { font-size: 0ex; }   /* корректно */
p { font-size: 1 ex; }  /* неправильно */
p { font-size: 1; }     /* неправильно */

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

Единицы измерений в CSS

Единицы измерений в CSS - это важная часть кода, которая используется при верстке страницы постоянно.

Они бывают абсолютными и относительными.

Абсолютные единицы измерений CSS

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

Единица измерения Название Эквивалент
cm сантиметры 1cm = 96px/2.54
mm миллиметры 1mm = 1/10 от 1cm
in дюймы 1in = 2.54cm = 96px
pc пика 1pc = 1/6 от 1in (дюйма) или 12 пунктов
pt пункты 1pt = 1/72th от 1in (дюйма)
px пиксели 1px = 1/96 от 1in (дюйма)

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

Самое интересное, что все остальные единицы можно представить, оттолкнувшись от пикселей:

  • 1mm (мм) = 3.8px
  • 1cm (см) = 38px
  • 1pt (типографский пункт) = 4/3 px
  • 1pc (типографская пика) = 16px

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

Цитата из спецификации:

Опорный пиксель представляет собой угол зрения одного пикселя на устройстве с плотностью пикселей 96dpi и расстоянием от считывателя длины руки. Таким образом, при номинальной длине руки 28 дюймов угол зрения составляет около 0,0213 градусов. Для чтения на расстоянии вытянутой руки 1px соответствует примерно 0,26 мм (1/96 дюйма).

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

Посмотреть файл примера в новой вкладке.

Относительные единицы измерений

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

Единица Относительно чего измеряется
% % от высоты шрифта родительского элемента
em Высота шрифта текущего элемента (по умолчанию в браузерах обычно =16px)
rem Размер шрифта корневого элемента
ex Высота символа «x» шрифта элемента в нижнем регистре
ch Ширина символа «0» (ZERO, U + 0030) в шрифте элемента
vw 1% ширины окна просмотра
vh 1% высоты окна просмотра
vmin 1% меньшего размера окна просмотра, т.е. меньшее значение из 1vw или 1vh.
vmax 1% большего размера окна просмотра, т.е. большее значение из 1vw или 1vh.

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

Начнем с настроек браузера и единицы rem (root em)

Это единица, соответствующая размеру "корневого" элемента, а именно - тега html. Для него не так часто задаются стили, поэтому размер берется из настроек браузера.

В каждом браузере есть настройки шрифтов по умолчанию. Посмотреть их в Хроме можно, нажав в меню "Настройки" на ссылку "расширенные настройки". В открывшемся окне задается тип шрифта по умолчанию для различных семейств шрифта (с засечками, без засечек и моноширинный), а также его размер. Чаще всего, это 16px. Именно он берется за "корневой" - "root" em - rem. От этого размера и рассчитывается единицы, указанные в rem.  

В инспекторе свойств для выделенного абзаца со стилевым правилом

видно, что размер шрифта как раз составляет 16px.


Примечание: чтобы посмотреть размер шрифта, сделайте правый клик на элементе и из контекстного меню внизу выберите пункт "Просмотреть код". Либо нажмите клавишу F12 и стрелочкой в квадратике выберите нужный элемент на странице.

Если вы хотите переопределить этот размер, задайте размер шрифта для html:

И еще добавим правило для body, чтобы проверить, как изменится размер шрифта для абзацев:

body { font-size: 18px; }

body {   font-size: 18px;   }

Тем не менее, размер шрифта для абзаца с правилом p {font-size: 1rem}, остался связанным с корневым элементом, и изменился до 20px:


Теперь он размером 20px. Т.е. соответствует размеру шрифта, заданному для html.

Примечание: Единица rem не поддерживается в браузере IE ниже 9-й версии.

Что такое 1em?

Это единица, связанная с размером шрифта родительского элемента. Соответствует 100% размера шрифта родителя.

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

В нашем примере зададим для article шрифт размером 1.2em.

body { font-size: 18px; } article { font-size: 1.2em; }

body {   font-size: 18px;   }

article {  font-size: 1.2em;  }

Напомню, что до этого был задан размер шрифта для body в 18px.  А body является непосредственным родителем для article. Поэтому размер шрифта для статьи будет 18px*1.2 = 21.6px. Именно так его и рассчитает браузер:

Использование процентов

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

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

<div>Процентное задание размера шрифта <div>Размер шрифта внутреннего элемента в %</div> </div>

<div>Процентное задание размера шрифта

    <div>Размер шрифта внутреннего элемента в %</div>

</div>

.percent { font-size: 150%; }

.percent {

   font-size: 150%;

}

В HTML один <div> вложен в другой <div>. И вот, что будет с размером шрифта в них: родительский элемент будет иметь размер

21.6px*150%/100% = 21.6px*1.5 = 32.4px.

21.6px*150%/100% = 21.6px*1.5 = 32.4px.

А вложенный элемент будет иметь размер шрифта, увеличенный в 1,5 раза по отношению к родителю, т.е. предыдущему <div>:

32.4px*150%/100% = 32.4px*1.5 = 48.6px.

32.4px*150%/100% = 32.4px*1.5 = 48.6px.

Именно это и получаем в Инспекторе свойств:

Примечание 1: если в css-правилах для <div> задать размер шрифта как  1.5em, то расчетная величина шрифта в px в браузере будет точно такой же.

.percent { font-size: 1.5em; }

.percent {

   font-size: 1.5em;

}

Примечание 2: по сути, вы можете пользоваться процентами и em для задания размеров шрифтов как аналогами. А вот для других правил - ширины, высоты и т.п. разница между этими величинами может быть существенной, т.к. размеры в em берутся всегда от размера шрифта родителя (и дальше вверх по цепочке к корневому родителю, т.е. тегу <html>), то ширина, указанная в %, будет отталкиваться от ширины родительского элемента. И если последняя задана в px, то разница между % и em будет велика. Такие же нюансы характерны для правил margin и padding. А свойство line-height, указанное в % будет отталкиваться от текущего размера шрифта, а вовсе не от line-height родителя.

Единицы ex и ch

Помимо em от размеров шрифта отталкиваются еще 2 единицы измерения - это ex и ch, которые означают размер символа "x" и размер символа "0" (ноль, или zero). При том, что такие размеры существуют в шрифте всегда, используются эти единицы редко, так как «размер шрифта» em обычно всех устраивает.

В примере ниже заголовок имеет размер в 2.5ex.

CSS единицы для мобильных устройств

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

Для этого были придуманы единицы, которые берут процент от viewport, т.е. окна просмотра, которое в телефонах будет от 320px до 480px, в планшетах 768-1024px, а на мониторах - от 1024px. Поэтому использовать здесь можно такие единицы, как

  • vw – 1% ширины окна
  • vh – 1% высоты окна
  • vmin – наименьшее из (vw, vh), в IE9 обозначается vm
  • vmax – наибольшее из (vw, vh)

Причем, данные единицы отлично зарекомендовали себя в тех случаях, когда, например, нужно установить высоту элемента, равную высоте экрана. Тогда достаточно написать следующее правило (для <div> в примере):

.block { height: 100vh; }

.block {

   height: 100vh;

}

Резюме:

В большинстве случаев для определения размеров шрифта, а также ширин, высот и отступов элементов следует использовать такие единицы измерений, как px, em, rem и %. Для мобильных устройств  хорошо подойдут vh, vw или vmin, vmax.

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

Полезные ссылки:

Просмотров: 116

Обзор единиц измерения CSS3 и их использования

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

 

Размер шрифтов

Всем знакомы единицы измерения размера шрифта px, а в CSS3 добавляется несколько новых единиц измерения. Вероятно, Вы уже сталкивались с единицами измерений em, 1em равен исходному размеру шрифта элемента, а 1,1em на 10% больше, и, возможно, Вы уже слышали о единицах измерения ex, равных высоте буквы x.

CSS3 вводит еще две новых относительных единицы измерения. Первая — это ch, которая равна ширине символа ноль (0). Вторая — это rem, которая определена как равная вычисленному значению font-size корневого элемента, хотя спецификация не особо детальная.

Размер устройства отображения 

Размер устройства отображения (viewport) — это ширина и высота видимой области экрана, в окне браузера.

Есть 3 новых единицы измерения, связанных с размером устройства отображения, которые будут очень полезны для многого. Это vh, vw и vmin.

Их значение 

Единица измерения vw означает ширину видимой области, и каждая единица vw равна 1% от общей ширины видимой области.

Например:

Эта запись сделает размер блока равным 1% от общей ширины видимой области. И размер блока будет меняться при изменении размера экрана.

Подобным образом единица измерения vh означает высоту видимой области, и каждая единица vh равна 1% от общей высоты видимой области.

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

У этих свойств очень много потенциальных применений, таких как верстка страниц, текстуры фона и многое другое.

Функциональное объявление 

Совершенно новое для области единиц измерения CSS – возможность CSS3 более гибко изменять единицы измерений.

Она представлена функциональными объявлениями, такими как calc(), cycle(), counter() и attr().

Как они работают

Как можно ожидать из названия, функциональное объявление calc() позволяет делать вычисления. Например, нужно, чтобы ширина элемента была равна ширине видимой области минус 5 пикселей. Чтобы добиться такого результата, можно использовать следующую запись:

div {
     width: calc(100vw - 5px);
}

Довольно удобно, не так ли?

Следующая функция называется cycle(), она как бы перебирает элементы.

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

li > ul {
    list-style-type: cycle(disk, circle, square, box);
}

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

Подобным образом, если нужно, чтобы у одного блока был жирный шрифт, а у его потомка был обычный шрифт и так далее, можно сделать следующее:

div {
    font-weight: cycle(bold, normal);
}

В результате получится такая структура:

<div>
    Bold
    <div>
        Normal
        <div>
            Bold
            <div>
                <!-- .. Etc -->
            </div>
        </div>
    </div>
</div>

Следующая функция attr() может получать данные от элементов. Например, если использовать атрибут HTML5 data для прикрепления информации к блоку с помощью Javascript или другими способами.

В результате будет несколько блоков следующего вида:

<div data-font="15"> Hey! </div>
<div data-font="43"> These are divs </div>
<div data-font="23"> That means division </div> 

При применении функции attr() можно использовать эти значения прямо в CSS:

div {
    font-size: attr(data-font px);
} 

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

И последнее функция — counter(). Счетчики позволяют добавлять числа последовательно и после этого помещать их в CSS. Таким образом, сначала нужно обнулить счетчик, после чего можно увеличивать его и использовать его значения при помощи функции counter().

Вот пример:

ul {
    counter-reset: lists;
}
li {
    counter-increment: lists;
    content: "List Item " counter(lists);
} 

Заключение 

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

Автор урока Johnny Simpson

Перевод — Дежурка

Смотрите также:

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *