Я упоминала новые (относительно) единицы измерения. Эти единицы – vw, vh, vmin и vmax, они основаны на размере вьюпорта браузера. Их фактический размер меняется в зависимости от изменения области просмотра браузера, что делает эти единицы идеальными для адаптивного дизайна. Хотя в моем предыдущем посте я выступила против использования этих единиц для указания размеров шрифта, они могут быть очень полезны для работы с элементами макета.
Единицы измерения viewport
Единицы измерения viewport являются относительными единицами, это означает что они не могут быть измерены объективно. Их размер определяется размером области просмотра в браузере. Существуют четыре единицы, относящиеся к области просмотра.
Я сконцентрирую внимание на первых двух, так как они наиболее часто используются. Во многих случаях единицы viewport (vh и vw) пересекаются с процентами в плане возможностей. Тем не менее, каждая из них имеет свои сильные и слабые стороны.
Если резюмировать, то получится следующее:
Когда имеешь дело с шириной, то лучше подходят %, а если с высотой, то лучше vh.
Элементы во всю ширину страницы: % > vw
Как я уже говорила vw определяет размер элемента исходят из ширины viewport. Однако, браузеры рассчитывают размер с учетом места для скроллбара.
Если ширина страницы превышает ширину viewport, то появляется полоса прокрутки. Однако на деле ширина viewport больше, чем ширина элемента html
Viewport > html > body
Поэтому если вы установите ширину элемента в 100vw, то элемент выйдет за пределы html и body. в данном примере я сделала красную границу вокруг элемента html и залила разделы разными цветами.
Из-за этого нюанса делать элементы на всю ширину страницы лучше при помощи процентов, а не опираясь на ширину viewport.
Элементы на всю высоту страницы: vh > %
При создании элементов, высота которых должна быть равна высоте страницы гораздо лучше использовать vh вместо процентов. Поскольку размер элемента определяемый в процентах задается относительного его родительского элемента, мы можем получить элемент высотой равной высоте экрана только если его родительский элемент так же занимает всю высоту экрана. Это означает что мы должны спозиционировать элемент как фиксированный для того чтобы сделать элемент html родительским, либо прибегнуть к использованию какого либо хака.
Используя vh добиться такого эффекта достаточно просто:
Example { height: 100vh; }
Вне зависимости от того как как вложен элемент.example его размеры могут быть заданы относительно размеров области просмотра. Проблема прокрутки не потревожит нас так как большинство сайтов не имеют горизонтального скроллбара
Вот несколько примеров того, как можно использовать единицы измерения vh.
Полноэкранные фоновые изображения
Типичное использование единицы измерения vh – для создания фонового изображения, которое охватывает всю высоту и ширину экрана, независимо от размера устройства. Сделать это достаточно легко.
Bg { position: relative; background: url("bg.jpg") center/cover; width: 100%; height: 100vh; }
Аналогичным образом мы можем сделать эффект «страниц», задав каждому разделу размеры области просмотра.
Section { width: 100%; height: 100vh; }
Мы можем использовать JavaScript чтобы создать иллюзию перелистывания страниц.
$("nav").on("click", function() { if ($(this).hasClass("down")) { var movePos = $(window).scrollTop() + $(window).height(); } if ($(this).hasClass("up")) { var movePos = $(window).scrollTop() - $(window).height(); } $("html, body").animate({ scrollTop: movePos }, 1000); })
Складывающееся изображение
Vh может также использоваться для контроля размера изображения в пределах страницы. Например, в рамках статьи. Мы хотим убедиться, что любое изображение будет показано полностью независимо от размера экрана.
Нам понадобится следующий код
Img { width: auto; /* Автоматическая ширина для пропорциональности высоты */ max-width: 100%; /* Не больше ширины родительского элемента */ max-height: 90vh; /* Не превышая высоту viewport */ margin: 2rem auto; }
Поддержка браузерами
Поскольку данные единицы измерения являются относительно новыми, по-прежнему существуют проблемы при работе с определенными браузерами.
Вот как их можно решить.
Единицы измерения 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 - размер шрифта корневого элемента (), она может использоваться вместо em для предотвращения влияния размеров шрифта родителя или предков на размер шрифта текущего элемента.
One-rem { font-size: 1rem; }
Единица ch равна ширине символа ноль (0) шрифта элемента. Ее использование может быть полезным для определения ширины поля, содержащего текст, потому что 1ch примерно соответствует одному символу.
Единица 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 используются абсолютные и относительные единицы измерения. Абсолютные единицы не зависят от устройства вывода, а относительные единицы определяют размер элемента относительно значения другого размера.
Относительные единицы
Относительные единицы обычно используют для работы с текстом, либо когда надо вычислить процентное соотношение между элементами. В табл. 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 есть несколько основных единиц измерения это относительные и абсолютные. При работе с CSS следует точно разобраться с их применением иначе работа с каскадными таблицами стилей будет сложна и непонятна. Абсолютные единицы измерения делятся на 5 типов, относительные на 4. Следует знать что Абсолютные единицы измерения не зависят от устройства вывода, т.е. мониторов и экранов, относительные же определяют размер элемента относительна другого размера т.е. монитора, экрана, родительского элемента и т.д.Теперь подробнее о них.
Относительные единицы измерения.
Относительные единицы измерения обычно используют для работы с текстом и в «расширяемых» верстках. В следующей таблице приведены основные относительные единицы измерения.
EM
Измеряемое значение зависит от размера шрифта текущего элемента (он устанавливается через атрибут font-size). Когда он явно не задан используется размер текста который заложен в браузере. Поэтому 1em изначально равен размеру шрифта заложенному в браузере по умолчанию.
EX
Этот аргумент определяется как высота символа «х» в нижнем регистре. Ex привязан к размеру шрифта заданного в браузере по умолчанию, если у родительского элемента задан атрибут «font-size» то он привязан к нему.
PX
Пиксель это 1 точка разрешения устройства вывода (монитора или экрана). Т.е. Если у вас разрешение монитора 1024*768 то вы имеете 1024 пикселя по горизонтали и 768 пикселей по вертикале. Т.е. размер пикселя напрямую зависит от разрешения устройства вывода и его технических характреристик.
%
Процентная единицы измерения зависит от размеров родительского элемента.
Абсолютные единицы измерения.
Абсолютные единицы измерения применяются не так часто и в большинстве своем при работе с текстом. В следующий таблицы приведены Абсолютные единицы измерения.
Из данных единиц следует описать только pt (пункт), т.к. pc это производное от pt а использование in, cm и mm описывать не нужно.
Пункт является самой распространенной и повсеместно используемой единицей измерения шрифтов (помните как выставляли размер шрифта в том же ворде или опен офисе?).
Применение атрибута font-size для масштабирования текста является одним из самых сложных аспектов стилевого оформления в CSS. CSS предлагает четыре единицы для измерения размера текста, отображаемого в веб-браузере. Какая из этих четырех единиц наиболее подходит для веб-документов? Этот вопрос вызвал множество обсуждений и споров. Дать однозначный ответ на такой вопрос сложно.
Знакомимся с единицами
- Проценты (% ): Процент во многом похож на em , за исключением нескольких принципиальных различий. Во-первых, текущий размер шрифта равняется 100% (т.е. 12pt = 100%). Использование единицы Процент позволяет вам увеличивать/уменьшать свой текст для удобства чтения.
Эм (em ): em это масштабируемая единица, которая используется для веб-документов. Один em равняется текущему размеру шрифта. Например, если размер шрифта документа 12pt , то 1em равняется 12pt . Поскольку em масштабируется, то 2em равняется 24pt , .5em равняется 6pt и т.д. Благодаря своей масштабируемости и высокой совместимости с мобильными устройствами, em все чаще используется в веб-документах.
Пиксели (px ): Пиксели это единицы фиксированного размера, которые используются для всего, что читается на компьютерном экране. Один пиксель равняется одной точке на компьютерном экране (это наименьшее деление разрешения вашего экрана). Многие веб-дизайнеры используют в веб-документах пиксели, чтобы при отображении в браузере вебсайт выглядел идеально с точки зрения пикселей. Единственная проблема заключается в том, что пиксели нельзя увеличить для удобства читателей со слабым зрением или уменьшить для удобства чтения на мобильных устройствах.
Точки (pt ): Точки традиционно используются в печатных изданиях (т.е. для всего, что печатается на бумаге). Одна точка равняется 1/72 дюйма. Точки очень похожи на пиксели тем, что они имеют фиксированный размер и их нельзя увеличить/уменьшить.
В чем же различие?
Разницу между этими единицами легко понять на конкретных примерах. Вот как они соотносятся друг с другом: 1em = 12pt = 16px = 100%. Давайте посмотрим, что произойдет, когда мы увеличим основной размер шрифта (используя CSS-селектор body) с 100% до 120%.
Как видите, Эм и Процент увеличиваются по мере увеличения основного размера шрифта, а Пиксели и Точки – нет. Легко использовать абсолютный размер для вашего текста, но намного легче использовать масштабируемый текст, который отображается на любом устройстве. Поэтому для текста веб-документа предпочтительнее использовать единицы Эм и Проценты.
EM или Процент?
Мы выяснили что Точка и Пиксель не лучшие единицы для веб-документов. Итак, у нас остались Эм и Процент. Теоретически, Эм и Процент – одинаковые единицы, но на практике между ними есть мелкие различия, которые нельзя не учитывать.
В приведенном выше примере мы использовали единицу Процент в качестве базового размера шрифта (для тэга body). Если вы измените базовый размер шрифта с Процентов на Эм (т.е. body { font-size: 1em; }), то разницы вы, скорее всего, не заметите. Давайте посмотрим, что произойдет, когда размером шрифта для body является 1em , и когда клиент меняет в браузере настройку «Размер текста» (такая настройка доступна в некоторых браузерах, например в Internet Explorer).
Когда размер текста в браузере клиента установлен на «средний» (medium), между Эм и Процентом различий не наблюдается. Но если эту настройку изменить, то разница станет вполне заметной. При настройке «Самый мелкий» (Smallest) Эм оказываются намного мельче, чем Проценты. А при настройке «Самый крупный» (Largest) все наоборот – Эм намного больше, чем Проценты. Можно сказать, что единицы Эм масштабируются, как им и положено делать, но на практике такой текст масштабируется слишком резко, и на некоторых устройствах самый мелкий текст становится нечитаемым.
Вывод
В теории единица Эм является новым стандартом для размеров шрифтов веб-документов, но на практике оказывается, что единица Процент более удобна для пользователей. При изменении клиентских настроек текст, для которого используется единица Процент, масштабируется должным образом, позволяя дизайнерам поддерживать читаемость, доступность и визуальный дизайн.
Победитель: процент (%).
Обычно когда я создаю новый дизайн, то для элемента body я использую проценты (body { font-size: 62.5%; }), а затем использую em для дальнейшего масштабирования. Пока в настройках для body используется единица Процент, вы можете использовать либо Процент, или Эм для любых других правил и селекторов CSS и при этом пользоваться преимуществами, которые дает использование Процента в качестве основного размера шрифта.
За последние несколько лет такая практика стала очень распространенной в веб-дизайне.
Пиксели сейчас используются в качестве допустимых единиц размера шрифта (для чтения мелкого текста пользователи могут использовать функцию браузера «зум»). Однако использование пикселей становится проблематичным из-за мобильных устройств с экранами с очень высокой плотностью пикселей (некоторые устройства Android и iPhone имеют плотность в 200-300 пикселей на дюйм, в связи с чем шрифты в 11 и 12-пикселей становятся плохо различимыми). Итак, я продолжаю использовать Процент в качестве основного размера шрифта для веб-документов.
