16 июня 2011 в 10:49

Какие единицы измерения выбирать при верстке

• CSS

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

Единицы длины бывают двух категорий: абсолюные и относительные . К абсолютным относятся:

• дюймы (in)
• сантиметры (cm)
• миллиметры (mm)
• пункты (pt)
• пики (pc)

В терминах спецификации css 1pt = 1/72in, а 1pc = 12pt.
В свойстве font-size задание отрицательного значения в единицах длины, например -25cm, недопустимо .
Почему абсолютные? Потому что за ними в физическом мире стоит реальная величина, тоесть эталоны .
С такими единицами работает устройство вывода, которое имеет реальный физический размер, например: при печати будем использовать такие единицы.
А вот для мониторов эти единицы не имеют никакого значения, есть некая условность , но это действительно только лишь условность .
К относительным единицам относятся:

• em (кегельная)
• x-height (ex)
• px (пикселы)

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

На таблице обозначения отдельных важных размеров шрифтов. Большая их часть нам не пригодится, но некоторые нужно знать.
Под цифрой 4 обозначена базовая линия элементов шрифтов, а под цифрой 13 - font-size, em. Так вот, em - это размер шрифта, который определяется высотой заглавной буквы и размеры выносных элементов сверху и снизу(вверху могут появиться диакритические знаки, например: ё или й ).
А что такое ex? Это высота строчной буквы. Под цифрой 3 в таблице так и написано. Для разных шрифтов это соотношение имеет разную величину. Но не все браузеры поддерживают такое соотношение.
Например: компания Microsoft предложила считать 1em = 2ex для всех типов шрифтов. Именно по причине, что ex в разных браузерах может быть разным, лучше в работе его не использовать . Некоторые браузеры действительно считают ex правильно, а некоторые, как IE в половину от em. А в реальности он может быть 0.46, на маленьких шрифтах такое несоответствие незаметно, а на больших будет существенное отличие.
Теперь по поводу использования на сайтах pt, pc, in.
Если мы размер элемента на сайте укажем в pt, он все равно от чего-то будет браться. Так как же браузер решает эту проблему?
На заре развития компьютерной техники, размеры мониторов были небольших диапозонов. И компания Microsoft предложила взять для определенности 96px = 1in и таково будет у нас разрешение наших устройств.
1in = 96px
А Apple сказал нет:) Давайте будем ориентироваться на полиграфистов и возьмем:
1in = 72pt
Но на практике получилось следующее: чем меньше разрешение, тем меньше есть возможность разместить там информацию.
Поэтому Apple передумала и сделала 1in = 96px, но это все полная ерунда , так как реальная физическое разрешение ваших устройств колеблется примерно от 60 - 600px / in.
Но по прежнему величина 96 является определяющим для пересчета. Это значит, что если написать размер 10pt, то браузер сделает следующее: 96 / 72 * 10. Вот такая история при пересчете pt в px.
На практике я не советую на мониторах использовать абсолютные единицы. На мониторах это вообще не имеет никакого значения, а вот при печати желательно, как раз их то и использовать. При печати нужно заботиться о том, чтобы все выводилось в pt.

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

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

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

Размер 12 миллиметров

Размер 1 сантиметр

Размер 1 дюйм

Размер 24 пункта

Размер 1 пика

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

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

1 px в CSS , как мы уже говорили выше, это точка на экране пользователя, физическая величина которой зависит от разрешения устройства и от того, с какого расстояния человек смотрит на его поверхность.
При указании процентов размер вычисляется в зависимости от размера родительского элемента. Так, например если ширина родительского элемента 500px, то при указании width:50% ширина элемента будет 250px.

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

Размер 20 пикселов

Размер 150%

Размер 2 em

Размер 2 ex

Результат:

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

Примеры использования:

Размер 2 vw

Размер 2 vh

Размер 2 vmin

Размер 2 vmax

Функция calc ()

Используется для указания вычисляемого значения свойств CSS, которые в качестве значения используют какое-либо число. В первую очередь calc можно применять для вычисления размеров, уголов, времени. Причем функция позволяет смешивать различные единицы измерений, например ширину div-а можно задать так:

div {
width: calc (100% — 40px);
}

В этом случае ширина div-а будет равно ширине родительского элемента минус 40 пикселей.

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

• + — сложение. Символ отделяется пробелами с двух сторон (height: calc (20% + 50px));
• — — вычитание. Символ отделяется пробелами с двух сторон (width: calc (90% — 10px););
• * — умножение (padding: calc (2em*2););
• / — деление. На ноль делить запрещено (width: calc (100%/4);).

В браузерах Firefox до версии 16.0 поддерживается функция -moz-calc, в Chrome до версии 26.0 и в Safari с версии 6.0 поддерживается -webkit-calc.

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

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

Что такое em?

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

Посмотрите на следующий код CSS :

Example { font-size: 20px; }

В данном случае 1em этого элемента или его дочерних элементов (при отсутствии других определений font-size ) будет равен 20px . Так что, если мы добавим строку:

Example { font-size: 20px; border-radius: .5em; }

Значение border-radius равное 5em будет равно 10px (то есть 20 * 0,5 ). Аналогично:

Example { font-size: 20px; border-radius: .5em; padding: 2em; }

Значение отступа 2em будет равно 40px (20 * 2 ). Как уже упоминалось, этот тип вычислений применяется к любым дочернему элементу, если у него нет явно определенного размера шрифта. Тогда величина единицы измерения em в CSS будет вычислена подобным образом.

Если в CSS размер шрифта не определен, то em будет равна размеру шрифта, используемого по умолчанию в браузере. Чаще всего это значение составляет 16px . Давайте рассмотрим, как можно использовать этот метод для легкого изменения размера элементов.

Изменение размеров уровней компонента

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

Метод работает следующим образом: используется свойство font-size , которое создает основную единицу для различных элементов внутри модуля. Поскольку единица измерения em рассчитывается на основе font-size родительского элемента, то это делает весь компонент легко редактируемым путем изменения свойства font-size родительского элемента.

Давайте посмотрим на это в действии:

Посмотреть демо

Этот модуль состоит из четырех основных элементов. Подвигайте слайдер в верхней части на демонстрационной странице, чтобы изменить размер модуля. Если хотите, можете просмотреть его в полноэкранном режиме . Слайдер содержит одно значение корневого элемента компонента: значение font-size .

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

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

Обратите внимание, что:

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

Некоторые замечания, упущения и т.д .

Как видно на примере, этот тип гибкого изменения размера не всегда то, что стоит использовать. Его можно несколько ограничить.

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

Не нужно использовать пиксели, чтобы установить корневой font-size . Вы можете использовать для этого em , но помните, что эти единицы измерения будут передаваться по наследству от родителей.

Что насчет rem и Sass?

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

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

Заключение

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

Перевод статьи “The Power of em Units in CSS ” был подготовлен дружной командой проекта .

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

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

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

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

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

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

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

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

Размер 2 em

Размер 2 ex

Размер 30 пикселов

Размер 200%

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

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

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

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

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

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

Размер 0.5 дюйма

Размер 8 миллиметров

Размер 24 пункта

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

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

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

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

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

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

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

Единица ch равна ширине символа «0» для текущего элемента и подобно em зависит от размера шрифта.

Разница между em и rem следующая. em зависит от размера шрифта родителя элемента и меняется вместе с ним, а rem привязан к корневому элементу, т. е. размеру шрифта заданного для элемента html .

Также есть группа относительных единиц привязанных к размеру области просмотра браузера. В табл. 2 показан их список с описанием.

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

Абсолютные единицы представляют собой физические размеры - дюймы, сантиметры, миллиметры, пункты, пики, а также пиксели. Для устройств с низким dpi (количество точек приходящихся на один дюйм, определяет плотность точек) привязка идёт к пикселю. В этом случае один дюйм равен 96 пикселям. Очевидно, что реальный дюйм не будет совпадать с дюймом на таком устройстве. На устройствах с высоким dpi реальный дюйм совпадает с дюймом на экране, поэтому размер пикселя вычисляется как 1/96 от дюйма. В табл. 3 перечислены основные абсолютные единицы.

Пример

Заголовок размером 30 пикселей

Размер текста 1.5 em

Заголовок размером 24 пункта

Сдвиг текста вправо на 30 миллиметров

Примечание

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

Internet Explorer поддерживает единицу vm вместо vmin .

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

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

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

×