Я упоминала новые (относительно) единицы измерения. Эти единицы – 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; }

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

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

Вот как их можно решить.

В CSS3 были добавлены новые относительные единицы измерения, такие как vh , vw , vmin , vmax . Эти единицы вычисляются относительно размеров окна браузера. Для настольных компьютеров ширина окна браузера больше ширины области просмотра (добавляется ширина скроллбара), поэтому если для элемента установить ширину 100vw , то он выйдет за пределы html.

Рис. 1. Полноэкранное фоновое изображение с шириной 100vw

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

IE: 9.0 кроме vmax, вместо vmin используйте vm
Edge: 12.0 кроме vmax, вместо vmin используйте vm
Firefox: 19.0
Chrome: 26.0
Opera: 15.0
Safari: 6.1
iOS Safari: 8.0
Android: 4.4
Chrome for Android: 55.0

1. Единицы vh и vw

Приёмы отзывчивого веб-дизайна базируются на использовании процентных значений. Но проценты далеко не лучшее решение для каждого случая, так как они вычисляются относительно размеров ближайшего родительского элемента. Поэтому, если вы хотите использовать высоту и ширину окна браузера, лучше воспользоваться единицами vh и vw . Например, если высота окна браузера равна 900px , то 1vh будет равен 9px . Аналогично, если ширина окна браузера равна 1600px , то 1vw будет равен 16px .

1.1. Адаптивное полноэкранное фоновое изображение

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

Fullscreen-bg { background: url(image.jpg); background-position: center; background-size: cover; width: 100%; height: 100vh; } Рис. 2. Адаптивно полноэкранное фоновое изображение

1.2. Эффект полностраничного слайда

Чтобы сделать блок на всю высоту окна браузера, необходимо задать height: 100%; для трёх элементов — html, body и непосредственно для самого блока:

Html, body { height: 100%; } section { height: 100%; }

Так как процентные размеры вычисляются относительно значений родительских элементов, то необходимо установить соответствующие значения для каждого элемента DOM. Единица измерения vh не требует установки значений по цепочке, так как её значение вычисляется напрямую относительно окна браузера:

Section { height: 100vh; }

Эффект перелистывания слайдов при клике на стрелку реализуется с помощью небольшого скрипта jQuery:

JQuery(document).ready(function($) { $("nav").on("click", function() { if ($(this).hasClass("down")) { var movePos = $(window).scrollTop() + $(window).height(); } if ($(this).hasClass("top")) { var movePos = $(window).scrollTop() - $(window).height(); } $("html, body").animate({ scrollTop: movePos}, 600); }); });

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

Единицы измерения 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 перечислены основные относительные единицы.

Единица 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 (Черновик спецификации ) - первая черновая версия стандарта.

× 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.