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

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

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

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

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

Единица измерения Описание Пример
% Устанавливает измерение в процентах относительно другого значения, как правило, охватывающего элемента. div {width: 50%;}
cm Определяет измерение в сантиметрах. p {padding-top: 1cm;}
em Относительное измерение высоты шрифта в em пространстве. Поскольку единица em эквивалентна размеру данного шрифта, то, если Вы укажите шрифт 12pt, каждый элемент «em» будет 12pt. Таким образом, 2em будет 24pt. h1 {letter-spacing: 3em;}
ex Это значение устанавливает измерение относительно x-высоты шрифта. x-высота определяется высотой строчной буквы x шрифта. p {letter-spacing: 7ex;}
in Определяет измерение в дюймах. h2 {word-spacing: .10in;}
mm Устанавливает измерение в миллиметрах. div {margin: .15mm;}
pc Определяет измерение в пиках. Пика эквивалентна 12 пунктам (12pt). h3 {font-size: 10pc;}
pt Определяет измерение в типографских пунктах (твип), введённых компанией Adobe. Пункт равен 1/72 дюйма или 25,4/72 мм = 0,3528 мм. В странах СНГ, входящих в Таможенный союз, 1 пункт равен 0,376 мм. table {font-size: 20pt;}
px Устанавливает измерение в пикселях экрана. p {margin: 30px;}
vh Равен 1% высоты окна просмотра. h1 {font-size: 2.0vh;}
vw Равен 1% ширины окна просмотра. h2 {font-size: 2.0vw;}
vmin Равен 1vw или 1vh, в зависимости от того, что меньше. div {font-size: 5vmin;}
Поделитесь:

Доброго времени суток!
Если нужна помощь в написание кода обращайтесь сюда.

ЕДИНИЦЫ ИЗМЕРЕНИЯ

В языке HTML существует два способа задать линейные размеры элемента: пиксели и проценты. В CSS единиц длины гораздо больше.

ЕДИНИЦЫ ИЗМЕРЕНИЯ
in — Дюймы pt — Пункты (типограф.) px — Пикселы
cm — Сантиметры pc — Пика em — Вычисляется относительно размера шрифта элемента
mm — Миллиметры ex — Высота строчной буквы «x» в шрифте % — Проценты

Условно единицы измерения можно разделить на три группы.

Первая группа — это величины, которые используются для измерения длин реальных предметов. К ним относятся:

  • in — дюймы;
  • cm — сантиметры;
  • mm — миллиметры.

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

  • pt — типографский пункт;
  • pc — пика;
  • ex — высота строчной буквы «x» в шрифте.

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

  • em — вычисляется относительно размера шрифта элемента;
  • px — пиксель.

    Вычисляется относительно устройства отображения;

  • % — процент. Естественно, процентные соотношения не являются единицами измерения в привычном смысле слова. Они вычисляются относительно размеров элемента-предка.

Реальные единицы измерения

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

  • размер монитора по диагонали (варьируется от 14 дюймов до 21 дюйма)
  • разрешение монитора (варьируется от 640х480 до 1600х1200)

Кроме того, на различных платформах могут быть различные экранные разрешения. Так, например, на платформе Macintosh разрешение 72 пикселя на дюйм, тогда как на платформе Windows — 96 пикселей на дюйм.

К чему это приводит? Если на мониторе с диагональю 21 дюйм шрифт размером 0.5 дюйма будет смотреться нормально, то на мониторе с диагональю 14 дюймов он будет слишком велик.

Точно так же, если при разрешении 640х480 текст размером читается нормально, то при разрешении 1600х1200 невозможно будет ничего разобрать.

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

Возьмем конкретный пример. Монитор размером 13 дюймов по горизонтали и 9 дюймов по вертикали с разрешением 1024х768 в операционной системе Windows, то есть с экранным разрешением 96 пикселей на дюйм. Тогда величина два дюйма будет соответствовать 96*2=192 пикселям. Однако реальная высота этих двух дюймов будет (768/9)*2=171 пиксель. То есть получается несоответствие: браузер считает, что два дюйма — это 192 пикселя, а реальный размер двух дюймов на мониторе — 171 пиксель. Таким образом, если вы устанавливаете размер элемента в два дюйма, то на этом конкретном мониторе реальный размер элемента будет равен 2,22 дюйма. В то же время на другом мониторе с другими параметрами реальный размер может быть совершенно иным.

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

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

Типографские единицы измерения для дизайнера даже привычнее, чем реальные единицы, потому что они сталкиваются с ними повсеместно, в любом графическом пакете размер шрифта задается с помощью пунктов (). Так что использовать типографские единицы в CSS хочется по привычке. Однако придется изменить свои привычки по той простой причине, что пункты () и пики () принципиально ничем не отличаются от реальных единиц измерения. Это становится понятно, если вспомнить, что такое пункт. Так вот один пункт равен 1/72 дюйма, а пика равна 12 пунктам, то есть 1/6 дюйма. Таким образом, на использование данных типографских величин накладывается абсолютно такое же ограничение, как и на использование реальных величин. Получается, что использовать пункты и пики надо только в той таблице стилей, которая предназначается для вывода страницы на печать.

Надо сказать, что для принтера действительно лучше использовать типографские единицы, потому что они для него являются родными. Дело в том, что некоторые достаточно старые браузеры некорректно переводят пиксели в пункты. Например, если вы укажете размер шрифта 16 пикселей, то некоторые браузеры и распечатают его как шестнадцать точек. Но экранное разрешение значительно отличается от разрешения принтера. Например, принтер с разрешением 600dpi выведет 16 пикселей как 0,03 дюйма, что читаться не будет совершенно.

Все вышесказанное ни в коей мере не относится к браузерам пятых и тем более шестых версий.

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

Кроме пунктов и пик есть еще одна достаточно интересная типографская единица — , которая соответствует высоте строчной букве «x». В отличие от всех предыдущих единиц, эта единица является относительной. Относительные единицы просто незаменимы в резиновой верстке, когда главным является сохранение пропорций. Что касается высоты буквы «x», то она может значительно варьироваться от шрифта к шрифту. У большинства шрифтов высоты буквы «x» равна половине высоты шрифта, однако у некоторых декоративных шрифтов может составлять всего одну треть от высоты шрифта.

Для чего же можно использовать единицу измерения, которая базируется на высоте буквы «x»? На самом деле, область применения данной единицы достаточно узка. Ее предпочтительно использовать для выравнивания по вертикали, чтобы точно выровнять какой-либо блок по линии текста.

Сила единицы измерения em в CSS

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

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

В браузере Internet Explorer 5.0 равен , что абсолютно неверно, потому что у разных шрифтов соотношение высоты буквы «х» и высоты шрифта может быть и , и . Так что использованию данной единицы измерения мешает еще и плохая реализация ее поддержки браузерами.

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

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

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

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

Единица Описание
em Высота шрифта текущего элемента
ex Высота символа x
px Пиксел
% Процент

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

ex определяется как высота символа «x» в нижнем регистре. На ex распространяются те же правила, что и для em, а именно, он привязан к размеру шрифта, заданного в браузере по умолчанию, или к размеру шрифта родительского элемента.

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

В примере 1 показано применение указанных единиц.

Пример 1. Использование относительных единиц

Результат данного примера показан ниже (рис. 1).

Рис. 1. Размер текста при различных единицах

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

Абсолютные единицы применяются реже, чем относительные и, как правило, при работе с текстом. В табл. 2 перечислены основные такие единицы.

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

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

Пример 2. Использование абсолютных единиц

Результат использования абсолютных единиц измерения показан ниже (рис. 2).

Рис. 2. Размер текста при различных единицах

Пересчет миллиметров в пункты

Я
   moonlight

 

05.04.18 — 08:25

Добрый день!

В обработке Печать этикеток есть такой фрагмент кода:

ОбластьНоменклатура.ВысотаСтроки = ВысотаЭтикетки * 2.65 * 0.3;     ОбластьШтрихкод.ВысотаСтроки     = ВысотаЭтикетки * 2.65 * 0.5;     РисунокШтрихкод.Расположить(ОбластьШтрихкод);     ОбластьЦена.ВысотаСтроки         = ВысотаЭтикетки * 2.65 * 0.2; Почему в этом случае коэффициент пересчета мм в пункты =2,65? ведь в одном мм около 2,83 пункта!
Спасибо.

 
 

   lodger

 

1 — 05.04.18 — 08:36

код типовой?

   moonlight

 

2 — 05.04.18 — 08:42

(1) ДА!

   moonlight

 

3 — 05.04.18 — 08:43

И вот еще вопрос. Для расчета ширины используется коэффициент 0,53 ОбластьГраницаСнизу.Область(1,1,1,1).ШиринаКолонки = ШиринаЭтикетки*0.53; Почему 0,53?
   lodger

 

4 — 05.04.18 — 08:44

(2) им виднее.
(3) если честно, я вообще слабо понимаю сколько на самом деле пикселей или миллиметров в 1сных попугаях.

   vis_tmp

 

5 — 05.04.18 — 09:03

Да, типовой, я тоже такое видел

   Сияющий в темноте

 

6 — 05.04.18 — 10:07

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

   СвинТуз

 

7 — 05.04.18 — 10:30

Халтура.

Единицы измерения CSS, размер шрифта

Проще затянуть отчет как лассо на этикетке.

 

TurboConf 5 — расширение возможностей Конфигуратора 1С

ВНИМАНИЕ! Если вы потеряли окно ввода сообщения, нажмите Ctrl-F5 или Ctrl-R или кнопку «Обновить» в браузере.

Тема не обновлялась длительное время, и была помечена как архивная. Добавление сообщений невозможно.
Но вы можете создать новую ветку и вам обязательно ответят!
Каждый час на Волшебном форуме бывает более 2000 человек.

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

Символы – это буквы, пробелы, знаки пунктуации, цифры, специальные символы.

Среди основных атрибутов символов можно выделить: шрифт (гарнитура), кегль и начертание.

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

Обычно шрифты разделяют на две большие группы: шрифты с засечками и рубленные (без засечек).

Единицы измерения: «px», «em», «rem» и другие

Например:

Шрифты с засечками : Times Roman; Courier New Cyr, рубленные шрифты: Arial Cyr

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

Размер шрифта (кегль). Единицей измерения шрифта является пункт. В основу измерения типографских шрифтов положены система Дидо, в которой пункт равен 0,376 мм, и англо-американская система (или система Пика), в которой пункт равен 0,353 мм. В российской системе набора пункт равен 0,376 мм, однако, некоторые компьютерные шрифты (в основном нерусифицированные) базируются на пункте, равном 0,353 мм.

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

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

Начертание. Кроме нормального (обычного) начертания символов обычно применяют полужирное, курсивное и полужирное курсивное. В текстовом процессоре Word. по умолчанию символы оформляются шрифтом Times Roman Cyr, размер 10 пт, нормальное начертание.


Предыдущая17181920212223242526272829303132Следующая


Дата публикования: 2014-11-02; Прочитано: 115 | Нарушение авторского права страницы



studopedia.org — Студопедия.Орг — 2014-2018 год.(0.001 с)…

См. также оглавление со всеми советами.

На этой странице:

, , , , …

Указывать длину в CSS можно в разных единицах. Некоторые из них пришли из типографской традиции, как пункт () и пика (), другие, напр. сантиметр () и дюйм (), знакомы нам в повседневном обиходе. Есть и «волшебная» единица, придуманная специально для CSS: . Значит ли это, что для разных свойств нужны разные единицы?

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

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

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

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

Ре­ко­мен­ду­ются Мож­но ино­гда Не ре­ко­мен­ду­ются

Экран em, px, % ex pt, cm, mm, in, pc
Печать em, cm, mm, in, pt, pc, % px, ex

Соотношение между абсолютными единицами таково: 1in = 2.54cm = 25.4mm = 72pt = 6pc

Если у вас есть под рукой линейка, можете проверить точность своего устройства. Вот прямоугольник высотой 1 дюйм (2.54cm): ↑
72pt

Так называемые абсолютные единицы (, , , и ) в CSS означают то же самое, что и везде, но только если у устройства вывода достаточно высокое разрешение.

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

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

CSS не уточняет, что именно понимается под «высоким разрешением». Но так как у дешевых принтеров сегодня бывает не менее 300 точек на дюйм, а у хороших экранов порядка 200 точек на дюйм, граница, скорее всего, проходит где-то между этими значениями.

Еще одна причина не использовать абсолютные единицы где-либо, кроме печати: на разные экраны мы смотрим с разного расстояния. 1 сантиметр на экране настольного компьютера выглядит маленьким. Но на мобильном экране прямо перед глазами — это много. Лучше вместо них использовать относительные единицы, напр. .

Единицы и зависят от размера шрифта и могут быть свои для каждого элемента в документе. Единица — просто размер шрифта. В элементе, которому задан шрифт в 2in, 1em и означает эти 2in. Указание размеров (напр., для отступов) в означает, что они задаются относительно шрифта, и какой бы ни был шрифт у пользователя — крупный (напр. на большом экране) или мелкий (напр. на мобильном устройстве), эти размеры останутся пропорциональными. Объявления наподобие и в CSS крайне популярны.

Единица используется нечасто. В ней выражаются размеры, которые должны отсчитываться от x-высоты шрифта. X-высота — это, грубо говоря, высота строчных букв вроде a, c, m, или o. У шрифтов с одинаковым размером (и, соответственно, при одинаковом ) может быть огромная разбежка в размерах строчных букв, и если важно, чтобы какая-то картинка, например, соответствовала x-высоте, единица к вашим услугам.

Единица в CSS волшебная. Она не связана с текущим шрифтом, но и с физическими сантиметрами или дюймами обычно тоже не связана. Единица определена как что-то маленькое, но видимое, т.е. горизонтальную линию толщиной 1px можно было отобразить с четкими краями (без сглаживания). Что считается четким, маленьким и видимым, зависит от устройства и способа пользования им: держите ли вы его прямо перед глазами, как мобильный телефон, на расстоянии вытянутой руки, как монитор, или где-то на промежуточном расстоянии, как электронную книгу? Поэтому по определению не фиксированная длина, а нечто, зависящее от типа устройства и его обычного использования.

Чтобы понять, почему единица именно такая, представьте ЭЛТ-монитор из 1990-х: наименьшая точка, которую он мог отобразить, была размером примерно в 1/100 дюйма (0,25 мм) или чуть больше. Свое название единица получила от тех экранных пикселей.

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

На самом деле CSS требует, чтобы был точно равен 1/96 дюйма при любом выводе на печать. В CSS считается, что принтерам, в отличие от экранов, не нужны разные размеры для , чтобы отображать четкие линии. Поэтому при печати px не только одинаково выглядит независимо от устройства, но и заведомо измеряется одной и той же величиной (совсем как единицы , , , и , как объяснялось выше).

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

Используйте или для шрифтов

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

Вот несколько линий разной толщины. Некоторые из них могут казаться четкими, но как минимум линии в 1px и 2px должны быть четкими и видимыми:

0.5pt,1px,1pt,1.5px,2px

Если первые четыре линии выглядят одинаковыми (либо линия в 0.5pt пропала), скорее всего вы видите это на мониторе, не способном отображать точки мельче 1px. Если линии выглядят возрастающими по толщине, скорее всего вы видите эту страницу на качественном экране или на бумаге. А если 1pt выглядит толще, чем 1.5px, то это скорее всего экран мобильного устройства (похоже, последняя фраза описывает ситуацию до правки 2011 года — прим. перев.).

Волшебная единица CSS, , часто бывает удачным выбором, особенно если нужно выровнять текст с картинками, либо просто потому, что что-либо толщиной 1px (или кратной 1px) заведомо будет выглядеть четко.

Но размеры шрифтов еще лучше задавать в . Идея в том, чтобы 1) не задавать размер шрифта для элемента BODY (в HTML), а использовать размер шрифта по умолчанию для устройства, поскольку это наиболее удобный для читателя размер; и 2) указывать размеры шрифта других элементов в : , чтобы H1 был в 2½ раза крупнее основного шрифта страницы.

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

Но даже там чаще всего лучше использовать размер шрифта по умолчанию.

Таким образом, единица избавляет от необходимости знать разрешение устройства. Независимо от разрешения устройства вывода (96 dpi, 100 dpi, 220 dpi или 1800 dpi), длина, указанная в виде целого числа , всегда выглядит хорошо и везде достаточно похоже. Но что, если мы хотим узнать разрешение устройства, например, чтобы решить, можно ли использовать линию в ? Выход — проверить разрешение с помощью медиавыражений. Подробности о медиавыражениях — за рамками этой статьи, но вот небольшой пример:

div.mybox { border: 2px solid } @media (min-resolution: 2dppx) { /* Media with 2 or more dots per px */ div.mybox { border: 1.5px solid } }

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

Чтобы было еще проще писать стилевые правила, зависящие только от размера шрифта по умолчанию, с 2013 года в CSS есть новая единица: . Один (от «root em», т.е. «корневой em» или «em корневого элемента») — это размер шрифта корневого элемента в документе. В отличие от , который может быть для каждого элемента свой, для всего документа один и тот же. Например, чтобы задать элементам P и H1 одинаковый внешний отступ слева, вот для сравнения CSS-код до 2013 года:

p { margin-left: 1em } h1 { font-size: 3em; margin-left: 0.333em }

и новая версия:

p { margin-left: 1rem } h1 { font-size: 3em; margin-left: 1rem }

Благодаря другим новым единицам стало можно указывать размеры относительно окна пользователя. Это и . Единица  — 1/100 ширины окна, а  — 1/100 его высоты. Еще есть , соответствующая меньшему из и . И (можете догадаться, что она делает).

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

Created 12 Jan 2010;
Last updated

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

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