cm в CSS

Содержание

5. CSS — Относительные и абсолютные единицы измерения

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

CSS поддерживает множество единиц измерений, включая абсолютные единицы измерения, такие как дюймы, сантиметры, пункты и т.д., а также относительные единицы измерения, такие как проценты, em и т.д. Эти значения необходимо использовать при указании различных измерений в ваших правилах стиля, например border = «5px solid blue».

Ниже перечислены все единицы измерения CSS вместе с соответствующими примерами:

Единицы измерения CSS (пиксели, Em и Ex) и функция calc. Примеры

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

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

Единица Описание
mm Миллиметр
cm Сантиметр (равен 10mm)
in Дюйм (равен 2,54cm)
pt Пункт (равен 1/72in)
pc Пика (равна 12pt)

Абсолютные единицы используются реже чем относительные и применяются в основном для задания размера текста. А для указания размера текста в основном используют пункт (pt), который получается путем деления одного дюйма на 72 части. Дюйм в свою очередь равен примерно 25,4 миллиметра, соответственно один пункт примерно равен одной трети миллиметра. Пример использования абсолютных единиц измерения:

CSS Единицы

Единицы CSS

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

Многие свойства CSS принимают значения «Length», такие как ширина, отступ, отступ, размер шрифта, ширина границы и т.д.

Длина — это число, за которым следует единица длины, например 10px, 2em и т.д.

Между номером и устройством не может быть пробела. Однако если значение равно 0, единицу можно опустить.

Для некоторых свойств CSS допускается отрицательная длина.

Существует два типа единиц длины: абсолютный и относительный.

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

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

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

Единицы Описание
cm centimeters
mm millimeters
in inches (1in = 96px = 2.54cm)
px * pixels (1px = 1/96th of 1in)
pt points (1pt = 1/72 of 1in)
pc picas (1pc = 12 pt)

* Pixels (px) are relative to the viewing device. For low-dpi devices, 1px is one device pixel (dot) of the display. For printers and high resolution screens 1px implies multiple device pixels.

Relative Lengths

Relative length units specify a length relative to another length property. Relative length units scales better between different rendering mediums.

Unit Описание
em Relative to the font-size of the element (2em means 2 times the size of the current font)
ex Relative to the x-height of the current font (rarely used)
ch Relative to width of the «0» (zero)
rem Relative to font-size of the root element
vw Relative to 1% of the width of the viewport*
vh Relative to 1% of the height of the viewport*
vmin Relative to 1% of viewport’s* smaller dimension
vmax Relative to 1% of viewport’s* larger dimension
% Relative to the parent element

Совет: Модули EM и REM практичны в создании идеально масштабируемой компоновки!
* Видовой экран = размер окна браузера. Если видовой экран шириной 50 см, 1ВВ = 0.5 cm.

Поддержка браузера

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

Length Unit
em, ex, %, px, cm, mm, in, pt, pc 1.0 3.0 1.0 1.0 3.5
ch 27.0 9.0 1.0 7.0 20.0
rem 4.0 9.0 3.6 4.1 11.6
vh, vw 20.0 9.0 19.0 6.0 20.0
vmin 20.0 9.0* 19.0 6.0 20.0
vmax 26.0 Не поддерживается 19.0 7.0 20.0

Примечание: Internet Explorer 9 поддерживает VMIN с нестандартным именем: VM.

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

Перевод статьи «Units in CSS (em, rem, pt, px, vw, vh, vmin, vmax, ex, ch, …)».

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

В этой статье мы рассмотрим относительные и абсолютные единицы измерения, а также единицы измерения области просмотра (viewport-единицы).

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

Размеры в CSS можно указывать не только в абсолютных единицах, таких как пиксели, поинты или сантиметры, но и в относительных – в процентах, em или rem. Использование относительных единиц измерения также помогает придерживаться стандартов доступности.

В большинстве браузеров по умолчанию установлен размер шрифта 16px. Это значение можно использовать при расчетах (например, 16px равны 1em, 1rem или 100%).

Давайте рассмотрим, какие же относительные единицы измерения у нас есть.

  • % – измерение в процентах.
  • em – размер шрифта относительно обычного, т. е., если шрифт имеет размер 2.5em, значит, он в 2,5 раза больше обычного шрифта.
  • rem – размер шрифта относительно корневого элемента документа.
  • ch – ширина символа «0». В моноширинных шрифтах, где все символы имеют одинаковую ширину, 1ch это ширина одного символа.
  • ex – x-высота текущего шрифта, измеряется в высоте символа «х» в нижнем регистре.

Чем отличаются em и rem?

Разница между этими единицами в наследовании. Значение rem основывается на корневом элементе (html). Каждый дочерний элемент в качестве основы для вычислений использует размер шрифта элемента html.

А в единицах em вычисления основаны на размере шрифта родительского элемента.

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

Различные семейства шрифтов

Все представленные на картинке шрифты имеют один размер (18pt), но благодаря красной линии видно, что x-высота (ex) у этих шрифтов разная.

На этой картинке шрифты имеют все тот же одинаковый размер (18pt). Но они отличаются шириной, т. е., их размер в единицах ch будет разным. Символы моноширинных шрифтов имеют одинаковую ширину, а в serif или sans-serif символы отличаются по ширине (например, «i» будет уже, чем «o»).

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

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

  • cm – сантиметры. 1 cm = 1 cm
  • mm – миллиметры. 10 mm = 1 cm
  • in – дюймы (inches). 1 in = 96px = 2.54 cm
  • px – пиксели. 1 px = 1/96 от 1 in
  • pt – поинты (points). 1 pt = 1/72 от 1 in
  • pc – пайки (пики, англ. pica). 1pc = 12 pt

Единицы измерения области просмотра (viewport-единицы)

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

  • vw – 1% от ширины области просмотра (50% это половина ширины области просмотра).
  • vh – 1% от высоты области просмотра (50% это половина высоты области просмотра).
  • vmin – 1% отменьшего размера ширины или высоты области просмотра (т. е., если ширина меньше высоты, то vmin рассчитывается от ширины, при этом 1 vmin = 1 vw).
  • vmax – 1% отбольшего размера ширины или высоты области просмотра (т. е., если высота больше ширины, то vmax рассчитывается от высоты, при этом 1 vmax = 1 vh).
Илон Маск рекомендует:  Математические функции bcmath произвольной точности

vmin и vmax могут изменяться в зависимости от изменения размера окна браузера или смены ориентации мобильного телефона.

rem в CSS. Общие сведения и способы применения

Дата публикации: 2015-11-09

От автора: сегодня мы рассмотрим еще один тип единиц измерения rem в css. Данный тип отлично поддерживается браузерами и полифиллами в случае со старыми обозревателями.

Описание

Единицы измерения rem в CSS что это? Если вы любитель музыки, то должно быть сталкивались с группой «REM». Но в отличие от своих коллег «Rapid Eye Movement» наш rem расшифровывается, как «root em». Данный тип единиц измерения создан для гармонии и баланса с дизайном. Определение одной единицы rem на W3C:

Равная вычисленному значению свойства font-size для основного текста. Если свойство font-size установлено для основного текста, то rem единицы связываются с этим свойством.

Это значит, что 1rem равен размеру текста для тега html (в большинстве браузеров по умолчанию это 16px).

Rem против Em

Основная загвоздка с em в том, что они определяются по размеру текста конкретного элемента. Кроме того, они наследуются, что приводит к непредсказуемым последствиям. Рассмотрим следующий пример. Списки будут иметь шрифт 12px, а основной текст 16px:

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Если наш список вложен в другой список, размер шрифта внутреннего будет составлять 75% от родителя, т.е. 9px. Можно исправить это так:

Это решает проблему, однако не стоит забывать о более глубоком наследовании. С rem все намного проще:

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

Размер текста в Rem

Jonathan Snook в своей статье Размер текста в Rem в мае 2011 г. был одним из первопроходцев в применении данных единиц измерения к шрифтам. Как и множество других CSS разработчиков, он столкнулся с проблемой с em единицами в сложных макетах.

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

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

16px = 1rem (base)

Как видно, данные значение неудобны при вычислениях. По этой причине Snook использовали трюк под названием «62,5%». Это старый трюк, его уже применяли с em единицами:

Так как rem связаны с корневым текстом, то вариант от Snook выглядит так:

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

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

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

Третий способ подсказал Chris Coyier на сайте CSS-Tricks. Он использует все три типа единиц измерения. Корневой текст он оставляет в px, модули в rem, а элементы модулей в em. Данный подход облегчает манипулирование размерами основного текста. На основе корневого текста вычисляется размер модулей, а по размеру модулей вычисляется размер шрифта для текста в модулях. Louis Lazaris обсуждала этот последний способ в статье Мощь em единиц измерения в CSS. В примере ниже можно увидеть, как работает последний способ:

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

Rem и медиа запросы

Использование em или rem в медиа запросах сводится к понятию «оптимальная длинна строки», и как она влияет на пользователей. В 2014 году веб-сайт Smashing Magazine опубликовал статью с комплексным исследованием типографики под названием Размер имеет значение: оптимальная длинна строки и размер шрифта в адаптивном веб-дизайне. В статье много интересного, в том числе была вычислена оптимальная длина строки: от 45 до 75-85 символов (включая пробелы и знаки препинания). Идеальное значение строки – 65 символов.

При грубом округлении 1rem = 1 символ, можно манипулировать текстом в одной колонке для мобильных устройств:

Есть одна интересная деталь при использовании rem и em в медиа запросах: все они имеют одно значение 1rem = 1em = размер браузера по умолчанию. Объяснение можно найти в спецификации media query:

«Относительные единицы измерения в медиа запросах основаны на значении браузера по умолчанию. К примеру, в HTML em вычисляется по размеру шрифта font-size, который задан юзер агентом или настройками браузера, а не стилями страницы.»

Сперва создадим span, в нем будем писать ширину экрана: Document width: px.

Создадим два медиа запроса: один для rem, другой для em (Для простоты используем Sass):

Добавим чуть-чуть JQuery для отображения размера экрана, обновляем значение при изменении размера окна:

Сначала мы показали, что правило 62,5% не работает для шрифтов в медиа запросах. При изменении ширины окна браузера, мы видим, как первый медиа запрос перестает работать на 320px (20x16px), а второй начинает на 480px (30x16px). Размер шрифта не меняется, на объявленные нами в стилях при изменении размера окна. Единственный способ это изменить в настройках браузера.

По этой причине не имеет значения, используем мы em или rem в медиа запросах. В таких проектах, как Foundation v5 и Bootstrap v4 alpha в медиа запросах используются em единицы.

Использование rem для масштабирования документов

Третий способ применения rem единиц это создание масштабируемых документов. Используя rem единицы в значениях ширины, внешних и внутренних отступов, можно создать интерфейс, который будет увеличиваться и уменьшаться в зависимости от размера шрифта по умолчанию. Рассмотрим данный способ на паре примеров:

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

Еще один пример:

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

Заключение

Заканчиваем наш урок по rem в CSS. Нет нужды объяснять все преимущества данных единиц измерения: адаптивность, масштабируемость, удобство при чтении и большая гибкость. Однако rem не панацея. При правильном применении они могут решить множество проблем, которые раздражали разработчиков много лет. Каждый из нас может создать свой подход. Открывайте текстовые редакторы, экспериментируйте и делитесь результатами в комментариях.

Автор: Adrian Sandu

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

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Cm в CSS

Единица cm определяет размер в сантиметрах. Часто используется для определения размеров при печати документа.

1cm = 10mm = 96px

Пример

В данном примере задаётся размер листа бумаги при печати и границы печати.

Спецификация ?

Спецификация Статус
CSS Values and Units Module Level 4 Рабочий проект
CSS Values and Units Module Level 3 Возможная рекомендация
CSS Level 2 (Revision 1) Рекомендация

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
  • Cand >Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft ( Черновик спецификации ) — первая черновая версия стандарта.

×

Браузеры ?

3 12 1 3.5 1 1
2.0 4 10.1 1

Браузеры

В таблице браузеров применяются следующие обозначения.

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

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

Меры длины в CSS

Для многих свойства CSS требуется указание длины. В нескольких примерах мы работаем со свойством width , которое используется для определения ширины элемента, и со свойством font-size , которое используется для указания размера шрифта, используемого для отображения содержимого элемента. В листинге 4-19 показан стиль, который использует оба этих свойства.

Листинг 4-19: Указание единиц измерения для свойств

Когда вы указываете длину, вы объединяете число единиц и идентификатор единиц без пробелов и других символов между ними. В листинге я указал значение свойства width равное 5cm , что обозначает 5 единиц, представленных идентификатором cm (сантиметров). Таким же образом я указал значение свойства font-size в 20pt , что обозначает 20 единиц, представленных идентификатором pt (пунктов, о которых мы поговорим в следующих разделах). CSS определяет два вида единиц длины: абсолютные и относительные (по отношению к другому свойству). Я объясню их в следующих разделах.

Работа с абсолютными единицами измерения длины

В предыдущем листинге я использовал величины cm и pt , которые являются примером абсолютных единиц измерения (абсолютных величин). Эти величины являются реальными средствами измерения. CSS поддерживает пять типов абсолютных величин, которые описаны в таблице 4-6.

Таблица 4-6: Абсолютные единицы измерения в CSS

Идентификатор единицы измерения Описание
in дюймы
cm сантиметры
mm миллиметры
pt пункты (1 пункт равен 1/72 дюйма)
pc пики (1 пика равна 12 пунктам)

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

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

Работа с относительными единицами измерения длины

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

Таблица 4-7: Относительные единицы измерения в CSS

Идентификатор единицы измерения Описание
em Относительно размера шрифта элемента
ex Относительно x-высоты шрифта элемента
rem Относительно размера шрифта корневого элемента
px Число CSS пикселей (предположительно на дисплее с 96dpi)
% Процент от значения другого свойства

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

Работа с относительными единицами измерения размера шрифта

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

Листинг 4-20: Использование относительных единиц измерения

В этом примере я указал значение для свойства height равное 2em , что обозначает, что р элементы должны обрабатываться таким образом, что высота элемента на экране в два раза больше размера шрифта. Эта величина рассчитывается для каждого отображаемого элемента. Я определил размер шрифта ( font-size ) по умолчанию в 15pt в элементе style и указал внутреннее значение в 12pt для второго элемента р в документе. Вы можете увидеть, как браузер отображает эти элементы, на рисунке 4-15.

Рисунок 4-15: Результат использования относительных единиц измерения

Вы можете использовать относительную единицу, чтобы выразить величину другой относительной единицы. В листинге 4-21 показан пример, где свойство height выражается в единицах em . Эти единицы em являются производными от значения свойства font-size , которое я выразил, используя единицы rem .

Листинг 4-21: Использование единиц измерения, которые являются производными от других относительных единиц измерения

Единица измерения rem относительна к размеру шрифта элемента html , также известного как корневой элемент. В этом примере я назначил абсолютный размер шрифта 0,2 дюйма, используя стиль (хотя я также мог бы создать внутренний стиль, определив атрибут style для элемента html напрямую). Значение для font-size в другом стиле выражается в 2rem , что обозначает, что размер шрифта в каждом элементе, для которого применяется это значение, будет в два раза больше, чем размер шрифта корневого элемента, то есть 0,4 дюйма. Свойство height в том же стиле определяется как 2em , то есть снова в два раза больше. Это обозначает, что браузер будет отображать p элемент, используя шрифт высотой в 0,4 дюйма, а в целом весь элемент будет 0,8 дюйма высотой. Вы можете увидеть, как браузер обрабатывает эти стили, на рисунке 4-16.

Рисунок 4-16: Определение относительных единиц измерения в рамках других относительных единиц

Третья связанная со шрифтами относительная единица – это ex , которая является текущей х-высотой шрифта. Это расстояние от базовой линии (основания) шрифта до средней линии, но часто за эталон берут высоту символа х (отсюда и название). Как правило, 1ex это приблизительно 0.5em .

Работа с пикселями

Пиксели в CSS – это, возможно, не то, чего вы ожидали. Обычное значение термина пиксель относится к самой маленькой видимой величине на дисплее: одному элементу (или точке) изображения. CSS же определяет пиксель следующим образом:

Эталонный пиксель – это визуальное отображение одного пикселя на устройстве с плотностью пикселей 96dpi на дистанции вытянутой руки от читателя.

Это пример еще одного смутного объяснения, «бича» CSS. Я не хочу быть пафосным, но спецификации, которые зависят от длины руки пользователя, для меня сомнительны. К счастью, основные браузеры игнорируют разницу между пикселями, как определено в CSS, и пикселями на дисплее и рассматривают 1 пиксель как 1/96 дюйма. (Это стандартная плотность пикселей для Windows; браузеры для других платформ с отличной от этой плотностью пикселей, используют пересчет из одних единиц в другие, поэтому там пиксель тоже приблизительно равен 1/96 дюйма).

Хотя от этого и не будет слишком много пользы, но вы можете прочесть о CSS пикселях на www.w3.org/TR/CSS21/syndata.html#length-units.

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

Листинг 4-22: Использование пикселей в стиле

В этом примере я выразил оба свойства, font-size и width , в пикселях (свойство width является дополнением к свойству height и устанавливает ширину элемента). На рисунке 4-17 можно увидеть, как браузер применил эти стили.

Рисунок 4-17: Определение величин в пикселях

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

Работа с процентами

Можно выразить единицу измерения в процентном соотношении к другой величине (к значению другого свойства). Это можно сделать, используя величину, выраженную в % (процентах), как показано в листинге 4-23.

Листинг 4-23: Использование процентного соотношения при выражении значения свойства

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

Это не так запутано, как может показаться. Я объясню, что такое содержащий блок в главе 16. (Это важная и повторяющаяся концепция). Я также расскажу вам, какие свойства CSS поддерживают процентные единицы измерения и как рассчитывается процент каждого из свойства CSS, о которых пойдет речь, начиная с главы 19.

Единицы измерения CSS без широкой браузерной поддержки

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

Таблица 4-8: Относительные единицы измерения в CSS без браузерной поддержки

Идентификатор единицы измерения Описание
gd Относительна к сетке; не имеет широкой поддержки, поскольку зависит от ряда свойства, которые не определены в спецификации CSS.
vw Относительна к ширине окна; для документов каждый vw является 1/100й ширины области дисплея (как правило, окно браузера).
vh Относительна к высоте окна; для документов каждый vw является 1/100й высоты области дисплея
vm Каждая единица измерения vm является 1/100й кратчайшей оси просмотра (высоты или ширины, в зависимости от того, какая меньше).
ch Относительна к средней ширине символов, отображенных с помощью текущего шрифта. Она плохо определена в спецификациях CSS и реализуется не последовательно.

Единицы vw , vh и wm имеют потенциал быть полезными в самых разных ситуациях, но в настоящее время они реализуются только в Internet Explorer. И даже тут мое неоднократное тестирование показало, что их реализация не совсем соответствует спецификации CSS.

Вычисление CSS единиц

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

Листинг 4-24: Расчет единиц измерения

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

CSS Units

CSS Units

CSS has several different units for expressing a length.

Many CSS properties take «length» values, such as width , margin , padding , font-size , etc.

Length is a number followed by a length unit, such as 10px, 2em, etc.

A whitespace cannot appear between the number and the unit. However, if the value is 0, the unit can be omitted.

For some CSS properties, negative lengths are allowed.

There are two types of length units: absolute and relative.

Absolute Lengths

The absolute length units are fixed and a length expressed in any of these will appear as exactly that size.

Absolute length units are not recommended for use on screen, because screen sizes vary so much. However, they can be used if the output medium is known, such as for print layout.

Unit Description
cm centimeters Try it
mm millimeters Try it
in inches (1in = 96px = 2.54cm) Try it
px * pixels (1px = 1/96th of 1in) Try it
pt points (1pt = 1/72 of 1in) Try it
pc picas (1pc = 12 pt) Try it

* Pixels (px) are relative to the viewing device. For low-dpi devices, 1px is one device pixel (dot) of the display. For printers and high resolution screens 1px implies multiple device pixels.

Relative Lengths

Relative length units specify a length relative to another length property. Relative length units scales better between different rendering mediums.

Unit Description
em Relative to the font-size of the element (2em means 2 times the size of the current font) Try it
ex Relative to the x-height of the current font (rarely used) Try it
ch Relative to width of the «0» (zero) Try it
rem Relative to font-size of the root element Try it
vw Relative to 1% of the width of the viewport* Try it
vh Relative to 1% of the height of the viewport* Try it
vmin Relative to 1% of viewport’s* smaller dimension Try it
vmax Relative to 1% of viewport’s* larger dimension Try it
% Relative to the parent element Try it

Tip: The em and rem units are practical in creating perfectly scalable layout!
* Viewport = the browser window size. If the viewport is 50cm w >

Browser Support

The numbers in the table specify the first browser version that fully supports the length unit.

Единицы измерения CSS (пиксели, Em и Ex) и функция calc. Примеры

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

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

Единица Описание
mm Миллиметр
cm Сантиметр (равен 10mm)
in Дюйм (равен 2,54cm)
pt Пункт (равен 1/72in)
pc Пика (равна 12pt)

Абсолютные единицы используются реже чем относительные и применяются в основном для задания размера текста. А для указания размера текста в основном используют пункт (pt), который получается путем деления одного дюйма на 72 части. Дюйм в свою очередь равен примерно 25,4 миллиметра, соответственно один пункт примерно равен одной трети миллиметра. Пример использования абсолютных единиц измерения:

Using cm/mm on the CSS of a web app that replicates paper interaction is a good practice?

I am building a web application that interact with documents for later printing. In some points is similar to Google Docs. I am considering using cm/mm on the CSS of my documents pages because it will help me on the document generation. Example:

What are the main issues of following this approach?

1 Answer 1

W3C has a great post on the subject of CSS units. In particular:

cm: Not recommended for screen / recommended for print

The so-called absolute units (cm, mm, in, pt and pc) mean the same in CSS as everywhere else. A length expressed in any of these will appear as exactly that size (within the precision of the hardware and software). They are not recommended for use on screen, because screen sizes vary so much. A big screen may be 60cm (24in), a small, portable screen is maybe only 8cm. And you don’t look at them from the same distance.

The only place where you could use pt (or cm or in) for setting a font size is in style sheets for print, if you need to be sure the printed font is exactly a certain size. But even there using the default font size is usually better.

Илон Маск рекомендует:  Что такое код mysql_db_query
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL