Пункты и пиксели разница
Чтобы узнать, сколько пикселей будет шрифт размером в 10 пунктов, можно воспользоваться таблицей преобразования points в pixels, ems или проценты.
Это несколько приблизительные значения, так как на самом деле величина кегля зависит от шрифта, браузера и операционной системы, но все-таки является хорошей отправной точкой и будеп полезна веб-дизайнерам при создании макетов сайтов и веб-разработчикам в процессе сборки сайта, прописывая свойства CSS.
Кстати, если в макете дизайна сайта, сделанного в Фотошопе, разрешение файла 72 точки на дюйм, то размер шрифта 12 пунктов в Фотошопе будет соответствовать 12 пикселям в каскадной таблице стилей CSS.
Почему использование px — это плохо для отзывчивого веб-дизайна?
Если макет зависит от содержимого страницы, например, когда вокруг надписи на кнопке нужно предусмотреть некое пустое пространство, то единицы измерения px позволяют достичь приемлемого результата лишь в том случае, когда текст надписи имеет определённый размер. Изменение размеров шрифта приведёт к тому, что, для придания странице нужного вида, придётся перенастраивать внутренние или внешние отступы, или ширину столбцов, или что угодно другое. А если при настройке параметров элемента макета использованы единицы измерения, ориентированные на размер шрифта ( em , ch , ex и rem ), то изменение свойства font-size приведёт к автоматическому изменению параметров макета. Этими возможностями удобно пользоваться при создании гибких дизайнов, это помогает поддерживать размер свободного пространства вокруг текста на правильном уровне. Это, кроме того, позволяет странице хорошо выглядеть даже тогда, когда пользователь устанавливает гораздо более крупный размер шрифта, чем тот, что изначально использовался на странице.
Единицы измерения, привязанные к шрифту
em | размер шрифта элемента |
ex | высота x в нижнем регистре |
ch | ширина 0 (ZERO, U+0030) |
rem | размер шрифта корневого элемента |
Для font-size это унаследованный размер шрифта, для остальных свойств — текущий размер шрифта, уже вычисленный для font-size .
Чтобы увидеть это вживую, возьмем такой код:
Получилось вот что:
Розовая полоса — градиент высотой 1em , чтобы было с чем сравнивать.
Оба блока имеют одинаковый размер шрифта, уменьшенный относительно родительского элемента в два раза ( font-size: .5em; ). И как теперь указать толщину рамки равной размеру шрифта?
border-width: .5em делает рамку в два раза тоньше, чем нужно. Это происходит потому, что родительский размер шрифта использует только font-size , а border получает вычисленное значение из font-size .
Таким образом, если где-то не в font-size нужно использовать текущий размер шрифта, не нужно копировать значение размера, достаточно указать 1em . У правого блока рамка правильной толщины.
Ещё одно демо, для понимания как соотносятся em и символы шрифта. Цветные полосы имеют высоту 1em , поэтому видно, что 1em примерно соответствует высоте символов с учётом заглавных букв и выносных элементов:
Размер em нигде не зафиксирован, и вычисляется в момент использования на основе размера шрифта родителя. Например, если задать размер шрифта вот таким образом:
а потом вложить несколько дивов один в другой, размер шрифта каждого следующего дива будет меньше предыдущего:
Потому что 1em — это текущий унаследованный размер шрифта, а .75em — унаследованный шрифт, уменьшенный на четверть. Для каждого нового вложенного дива сначала наследуется уменьшенный шрифт родителя, а потом тоже уменьшается заданным образом.
Об этом нужно помнить, если вы захотите задавать в em размеры переиспользуемых компонентов: при вкладывании элементов друг в друга вычисленное значение em может оказаться не тем, что хотелось бы получить.
ex — это высота буквы x в нижнем регистре. Если в шрифте нет подходящей метрики, и в нём нет такого символа, браузер попробует вычислить ex самостоятельно. Если это по каким-то причинам невозможно, ex считается равным .5em .
В демо цветные полосы имеют высоту 1ex , и для выбранных шрифтов 1ex будет равен высоте маленькой x :
Посмотрим, как на ex влияет шрифт, и как ex соотносится с em .
В этом демо квадратикам в левой группе заданы размеры в 1em , в правой — в 2ex , так можно проверить равен ли ex половине em . Также каждому квадратику задан свой шрифт:
В отличие от em , размер ex будет меняться вместе со шрифтом, и во всех случаях 2ex не равно 1em , то есть на соотношение в .5 полагаться нельзя.
ex точно также как и em наследует размер шрифта родителя:
ch — ширина символа 0 . Для моноширинных шрифтов это точная ширина любого символа, для остальных — примерная ширина одного узкого символа. Если по каким-то причинам ширину невозможно вычислить, запасным значением будет .5em .
Эрик Мейер предостерегает от попыток использовать ch для задания ширины контейнера в символах, потому что это не работает как ожидается. В демо ниже ширина каждого блока с текстом задана вот таким образом:
Ширина блока будет верной только для моноширинных шрифтов (см. Courier ), в некоторых шрифтах будет работать и для цифр ( Arial , Comic Sans ), в остальных случаях нельзя рассчитывать, что 1ch будет равен ширине символа:
Сопоставим 1em , 2ex и 2ch :
- 1ch больше 1ex (ширина 0 больше высоты x );
- 1ch не равен половине em ;
- значение ch может меняться вместе со шрифтом.
rem — это root em , размер шрифта корневого элемента, для веб-страницы это элемент html . Размер шрифта по умолчанию — 16px . Это значение не зафиксировано в спецификации, но используется всеми браузерами. Про историю вопроса можно почитать в рассылке W3C.
Если пользователь в настройках браузера задаст другое значение, оно переопределит размер шрифта корневого элемента. То есть если нужно сделать интерфейс, который будет масштабироваться под размер шрифта, выбранный пользователем, в качестве единицы измерения удобно использовать именно rem .
Важно понимать, что размер rem можно переопределить только для элемента html . Например, возьмем такие стили:
Если rem можно было бы переопределять в любом месте, текст бы увеличился, но этого не произошло:
Высота цветной полосы 24px , чтобы было с чем сравнивать.
Если переопределить размер шрифта для элемента html , всё сработает:
В отличие от em , rem всегда содержит размер шрифта только корневого элемента, поэтому вложенность ни на что не влияет:
Это позволяет делать компоненты, размеры которых привязаны к базовому размеру шрифта, но не зависят от вложенности элементов друг в друга.
Подумаем о продвижении моей идеи
Каждая кампания нуждается в броском слогане. Поэтому моё стремление к избавлению веб-дизайна от абсолютных единиц измерения нужно поддержать чем-то вроде наклейки на бампер или футболки с надписью. Вот несколько вариантов:
- Абсолютные единицы измерения — это абсолютный хлам! (Absolute units are absolute trash!)
- Просто скажем нет пикселям! (Just say no to pixels!)
- Абсолютно никаких абсолютных единиц измерения! (Absolutely no absolute units!)
- Чем относительнее дизайн — тем лучше! (Design is better relatively!)
Как вы относитесь к использованию абсолютных единиц измерения в веб-дизайне?
Сейчас все браузеры нормально увеличивают страницы и размеры в пикселях для них не помеха. Насколько я знаю, ранее рекомендовалось указывать все размеры в em, чтобы страница правильно масштабировалась при увеличении.
Так как быть сейчас, с современными браузерами? Тупо указывать все в пикселях? И есть ли какие исключения?
- Вопрос задан более трёх лет назад
- 7674 просмотра
В пикселях размер шрифта указывать не стоит, для этого существуют пункты (pt). Во всех современных браузерах, насколько мне известно, корректно масштабируется любой способ задания кегля. Пользоваться em следует скорее ради иерархии размеров: внутренний блок с 2em всегда будет иметь размер шрифта в два раза больше шрифта во внешнем блоке, как бы мы его не меняли. Плюс, так можно учесть нестандартный шрифт у пользователя в системе.
Пиксели используются в задании отступов и размеров элементов, но не всегда. Если нужно, чтобы отступ зависел от размера шрифта, его следует задать в em. Такой отступ, например, применяется при отбивке блока с цитатой.
Само по себе измерение размеров в пикселях (касаемо именно вёрстки) должно было не только умереть, но и не должно было рождаться. Есть нормальные DPI-независимые единицы, ими и надо пользоваться…
Лично я не понимаю как можно верстать НЕ в пикселях.
Ибо блоки\картинки\флоаты и другие современные дизайнерские решения в большинстве случаев работают на пиксельной сетке.
Вот есть у вас иконка в ссылке размеров 16 пикселей, и текст ей 13 пикселей. Все красиво выровнено.
А тут приходит человек с крупными шрифтами на верстрку на em\pt и жалуется что у него, понимаешь, верстка едет.
Как быть?
У самого папаня использует увеличный шрифт в винде. Специально для него перевел пару сайтов на пиксели. Что бы сайт выглядел как и должен. А не как кому-то надо
> У самого папаня использует увеличный шрифт в винде.
> Специально для него перевел пару сайтов на пиксели.
> Что бы сайт выглядел как и должен. А не как кому-то надо
Ну и гад же ты, Костя Федотов (с)
kashey, вы путаете вёрстку, и «нечто что делает вашу страничку отображаемой в браузере» (в идеале браузер должен уметь понимать вёрстку, а не верстать надо под каждый конкретный браузер)
лохматый не верстальщик. Но с удовольствием бы оторвал бы им лапы.
Семантика должна быть в html коде, а не css
Иконки — в SVG. Это хорошо, это прогрессивно; и масштабирование не страшно. Блоки/флоаты замечательно можно указывать в относительных размерах.
С растровой графикой сложнее, да. Но ничего невозможного.
Зачем заставлять пользователя пользоваться увеличением и игнорировать его настройки шрифтов? Не говоря о том, что сайт с указанием размеров элементов в пикселях выглядит, мягко говоря, по разному на экранах FullHD и 800х480
Две ситуации:
— экраны с разными dpi: при указании размеров в пикселях будет разный физический размер
— экраны с разными логическими размерами: при указании размеров элементов в пикселях будет или неиспользуемое место на больших экранах, или скроллинг на маленьких
В обоих случаях пользовательские настройки размеров шрифтов будут игнорироваться. Если так уж не хочется верстать с относительными размерами (em, ex, %), то верстайте лучше пунктами, пиками, дюймами, сантиметрами и миллиметрами, чем пикселями, имхо.
>при указании размеров элементов в пикселях будет или неиспользуемое место на больших экранах
а я дурак большой монитор для того и купил, чтоб на нем информации больше помещалось :)
Всю жизньь верстаю в пикселях и все окей. Запись 14 пикселей шрифт намного понятнее для осознания его размера, чем какой нибудь 1,45em. Лично тестировал когда то, так и не понял, почему все так ратуют за em — масштабируется одинаково. Большинство тех, кто высказался выше максимум аргументируют свои em фразами «Потому что так надо», «Потому что так правильно».
Потому что так действительно правильно. Вот уменьшится размер пикселя на новых мониторах — и буквы ужмутся в точки. Можно, конечно, масштабировать — но тогда это будут уже не реальные пиксели; прямая дорога к путанице.
Ваще то вы говорите бред про размер пикселя в новых мониторах. em считается от базового шрифта (16 пикселей ). Если юзер в браузере изменит базовое значение, то да, он увидит что другие шрифты относительно него (указанные в em'ах) изменятся, НО это никак не зависит от размера шрифта в мониторах. Если у монитора уменьшить размер звена, то как пикселевый шрифт станет меньше, так и em'овский (т.к. он считается от дефолтного шрифта, а не от какого то там dpi или других высших сил, как считает половина пользователей em). Но на практике 99,99% юзеров ваще не понимают, зачем менять базовый шрифт в браузере/системе, зато при указании в пикселях, я знаю, что у меня меню с графическим фоном не поедет. ЗАТО в пикселей удобнее понимать, что из себя представляет шрифт, чем в процентах или em'ах относительно этих самых 16 пикселей или сколько вы там в body зададите. Мне вот не по приколу каждый раз когда я беру шрифт из фотошопа, открывать калькулятор и считать скока там em 17ый шрифт. Конечно, моно заучить, но лень и не нужно.
Разве шрифт в настройках браузеров указывается в пикселях? O_o Всегда был уверен, что в пунктах (считай, что в дюймах, то есть указывается физический размер, а уж сколько пикселей получится зависит от dpi), в Фотошопе тоже, наверняка, по умолчанию размер шрифта в пунктах, тем более, что это их изобретение, если верить вики :)
В CSS существует множество единиц измерения. Обычно мы используем единицы размеров, но также есть единицы для углов — например, deg и turn , единицы времени — s и ms , единицы плотности экрана — например, dpi и dppx и другие.
Здесь будут рассматриваться только единицы размеров, которыми мы пользуемся чаще всего. Подробное описание можно найти в спецификации W3C Distance Units: the type.
Общим для всех единиц длины будет то, что для значения 0 , единицы можно не указывать: height: 0px и height: 0 будут работать одинаково, так что единицы измерения можно отбросить. Это позволяет немного быстрее писать код и считывать значения свойств.
Относительные единицы измерения
Относительные единицы измерения вычисляются на основе каких-то других величин: размера шрифта или размера экрана, и могут динамически меняться вместе с ними.
Абсолютные единицы измерения
cm | сантиметр | 1cm = 96px/2.54 ≈ 37,795px |
mm | миллиметр | 1mm = 1/10 от 1cm |
q | четверь миллиметра | 1q = 1/40 от 1cm = 0.25mm ≈ 0.945px |
in | дюйм | 1in = 2.54cm = 96px |
pc | пика | 1pc = 1/6 от 1in |
pt | пункт, точка | 1pt = 1/72 от 1in |
px | пиксель | 1px = 1/96 от 1in, 0.75 от pt |
Абсолютные единицы относительны друг для друга (соотношения в последней колонке), но все они привязаны к конкретным величинам.
Для печатных устройств сантиметры, миллиметры и дюймы должны быть равны своим обычным значениям, но для экранов это будет не так:
Я попыталась разными способами получить полоску длиной 10 сантиметров. Все полоски равны друг другу, но ни одна не равна 10 сантиметрам, если приложить линейку к экрану. Проверила на двух мониторах: на одном они короче, на другом — длиннее.
На веб-страницах физические единицы измерения вроде cm , mm и in не будут работать как ожидается, потому что главная экранная единица измерения — пиксель.
Что такое пиксель и какого он размера? Чем отличаются пиксели px от точек pt ? Почему у них такие странные размеры в 1/96 дюйма и 1/72 дюйма соответственно? Как были выбраны эти значения и почему этих единиц измерения две? Попытка разобраться с мелкой точкой на экране вызывает множество вопросов и требует погружения в историю. Я попыталась выяснить как всё было, и вот что узнала.
Когда появились первые программы для предпечатной подготовки, нужно было как-то соотнести размер элементов на экране с тем, чтоб будет напечатано на бумаге. Тогда оказалось, что один дюйм (inch) на экране соответствует 72 точкам. Это соотношение зафиксировано в pt , pt — это 1/72 дюйма. Изначально это была типографская единица измерения, и её значения менялись со временем, но с появлением компьютерных программ для полиграфии значение pt пришлось стандартизировать.
С развитием технологий стало возможно делать экраны с большим разрешением, и Microsoft предложила отображать 96 точек на дюйм, что было зафиксировано в px , то есть пиксель — это 1/96 дюйма. Это позволило увеличить чёткость мелкого текста, потому что для отображения символа теперь можно было использовать больше точек.
Размер px составляет 0.75 от pt . По сути, pt — это более крупный пиксель.
Позже появились ретиновые дисплеи с повышенной плотностью пикселей, и тогда CSS-пиксели, которые мы используем, перестали соответствовать физическим пикселям экрана, теперь это виртуальная единица, размер которой определяется устройством вывода. Для нас это не играет особой роли кроме как при работе с изображениями, когда для ретины нужно подготовить дополнительный набор картинок. Все размеры, заданные в пикселях, будут корректно отображены на экране вне зависимости от того, сколько физических пикселей для этого потребуется.
На сегодняшний момент соотношение физических единиц к точкам экрана утратило прежний смысл, но осталось зафиксированым в спецификации для сохранения обратной совместимости и упрощения конвертации одних единиц в другие.
При этом важно помнить, что раз CSS-пиксели уже не соответствуют физическим точкам экрана, сантиметры и дюймы при выводе на экран тоже не будут не соответствовать своим реальным размерам, об этом есть и в спецификации:
If the anchor unit is the pixel unit, the physical units might not match their physical measurements. Alternatively if the anchor unit is a physical unit, the pixel unit might not map to a whole number of device pixels.
То есть, если использовать дюймы для вёрстки веб-страниц, один дюйм всегда будет равен 96 пикселям, но никогда — реальной физической единице:
Таким образом, главное в абсолютных единицах — контекст использования:
- для вывода на печать экранные пиксели должны быть приведены к физическими единицами, следовательно, для подготовки документов к печати лучше использовать их;
- для вывода на экран дюймы и сантиметры должны быть приведены к пикселям, следовательно, для веб-разработки лучше сразу использовать пиксели.
Пока копалась в истории единиц измерения, выяснилось, что во внутреннем коде Gecko когда-то была поддержка километров, удалили в 2009-м:
Из физических единиц ещё может представлять интерес q : это относительно новая единица, и она поддерживается не всеми браузерами. q — это 0.25mm . Как и другие физические единицы, больше имеет смысл для печати, но также можно попытаться использовать её для уменьшения размера кода: q — это примерно 0.945px , то есть в некоторых случаях вполне можно использовать её вместо пикселей, получается один символ ( q ) вместо двух ( px ).
Пример такого использования я подсмотрела в этом демо. Открывайте осторожно, может повиснуть браузер. Попытка посмотреть стили в веб-инспекторе вешает его почти гарантированно, поэтому лучше посмотрите исходный код страницы. Скриншот:
Чистое безумие, конечно. Картина воспроизведена с помощью box-shadow , и мне кажется, тему рисования на CSS на этом можно закрывать.
Вес стилей демо — 4.5Mb, а если бы там вместо q были пиксели, стили весили бы на 300Kb больше.
▍размеров шрифтов, заданных с помощью функции clamp()?
Нормально ли выглядит такая конструкция: font-size: clamp(12px, 10vw, 22px) ? Нет, не нормально. Тут предпочтения пользователя игнорируются дважды. Во-первых — здесь, для указания размера, применяются единицы измерения vw , которые не масштабируются в соответствии с настройками, задаваемыми пользователем. Во-вторых — что произойдёт, если пользователь задаст размер базового шрифта, превышающий 22px ? Эта настройка будет проигнорирована. Вместо этого в каждый аргумент функции clamp() стоит включить единицы измерения, опирающиеся на параметры шрифта: font-size: clamp(0.75rem, 0.5rem + 8vw, 1.375rem) .
▍медиазапросов?
Об использовании единиц измерения px , em и rem в медиазапросах писали ещё в 2016 году. Если кратко передать смысл той публикации, то окажется, что для того чтобы страница хорошо выглядела бы в разных браузерах и правильно реагировала бы на изменения, предусматривающие изменение размеров текста, нужно использовать единицу измерения em , а не rem или px .
Почему использование единицы измерения px плохо сказывается на доступности контента?
Пользователи приходят на сайты ради материалов этих сайтов. Поэтому материалы должны быть пригодными для чтения. А это значит, что размеры шрифта должны быть… как минимум 12px ? Или, может, 16px ? На самом деле, смотреть надо по ситуации. И зависит это не от самих материалов, а от пользователя. Пользователи могут настраивать свои операционные системы или браузеры, устанавливая предпочитаемый ими размер шрифта, соответствующий их нуждам. Если им это нужно, то, настроив применение шрифта, размер которого крупнее стандартного, они могут спокойно, не приглядываясь, просматривать списки контактов и читать электронные письма. Если сайт создан с использованием размеров шрифтов, выраженных в единицах измерения px , то таким пользователям, для которых эти шрифты слишком мелки, даже если они и настроили удобный для себя размер шрифта, будет неудобно читать материалы сайта. Дело в том, что размеры, выраженные в пикселях, не масштабируются даже в том случае, когда браузер меняет размер шрифта корневого элемента. (Это утверждение, правда, нельзя назвать полностью правильным — Safari игнорирует размеры, выраженные в пикселях, и всё равно масштабирует шрифты.)
Уважайте нужды своих пользователей и выполняемые ими настройки их рабочей среды, настраивая размеры шрифтов с использованием единицы измерения rem . Такие шрифты хорошо масштабируются. Для организации плавного изменения размеров шрифтов (fluid typography) используйте в расчётах единицу измерения rem.
Таблица преобразования points в pixels, ems или проценты
Points | Pixels | Ems | Проценты |
---|---|---|---|
6pt | 8px | 0.5em | 50% |
7pt | 9px | 0.55em | 55% |
7.5pt | 10px | 0.625em | 62.5% |
8pt | 11px | 0.7em | 70% |
9pt | 12px | 0.75em | 75% |
10pt | 13px | 0.8em | 80% |
10.5pt | 14px | 0.875em | 87.5% |
11pt | 15px | 0.95em | 95% |
12pt | 16px | 1em | 100% |
13pt | 17px | 1.05em | 105% |
13.5pt | 18px | 1.125em | 112.5% |
14pt | 19px | 1.2em | 120% |
14.5pt | 20px | 1.25em | 125% |
15pt | 21px | 1.3em | 130% |
16pt | 22px | 1.4em | 140% |
17pt | 23px | 1.45em | 145% |
18pt | 24px | 1.5em | 150% |
20pt | 26px | 1.6em | 160% |
22pt | 29px | 1.8em | 180% |
24pt | 32px | 2em | 200% |
26pt | 35px | 2.2em | 220% |
27pt | 36px | 2.25em | 225% |
28pt | 37px | 2.3em | 230% |
29pt | 38px | 2.35em | 235% |
30pt | 40px | 2.45em | 245% |
32pt | 42px | 2.55em | 255% |
34pt | 45px | 2.75em | 275% |
36pt | 48px | 3em | 300% |
Безусловно, сайты для бизнеса лучше создавать при помощи проверенных CMS или использовать самописный движок,
СодержаниеТеория подготовки сайта к Retina дисплеямКак адаптировать изображения под Retina-экраныСкрипт RetinaПлагин Retinize It для
Одним из наиболее запутанных аспектов CSS является применение font-size атрибута для масштабирования текста. Используя CSS, вы можете изменить размер текста в браузере с помощью четырех разных единиц измерения. Какая из этих четырех единиц лучше всего подходит для веб? Это вопрос, который породил разнообразные дискуссии и критику. Поиск окончательного ответа затруднен, поскольку вопрос сам по себе сложный.
Знакомьтесь — единицы
1. «Ems» (em): «em» — это масштабируемая единица, которая используется в веб-документах. «em» равна текущему font-size, например, если font-size в документе 12pt, 1em равен 12pt. «em» масштабируема по своей природе, так 2em будет равен 24pt, 0.5em будет равна 6pt и т.д. Использование «em» становятся все более популярным в веб-документах из-за масштабируемости и возможности с пользой применять в мобильных устройствах.
2. Pixels (px): «px» имеют фиксированный размер единиц, которые используются на экранах (например, для чтения на экране компьютера). Один пиксель равен одной точки на экране компьютера (самый малый элемент разрешения вашего экрана). Многие веб-дизайнеры используют px в веб-документах в целях получения пиксель-идеального(pixel-perfect) представления своего сайта, отображаемого в браузере. Одна из проблем, с использованием px заключается в том, что эти единицы не позволяют изменять масштаб для слабовидящих читателей или мобильных устройств.
3. Points (pt): «pt», традиционно используются в печатных СМИ (все, что должно быть напечатано на бумаге, и т.д.). Один «pt» равен 1 / 72 дюйма. «pt», так же, как и «px», имеют фиксированный размер единицы и не могут масштабироваться.
4. Percents (%): Единицы измерения в % похожи на «em», за исключением нескольких принципиальных различий. Во-первых, текущий font-size равен 100% (т.е. 12pt = 100%). При использовании "%", ваш текст становится полностью масштабируемым для мобильных устройств и удобства пользователя (accessibility).
Итак, в чем же разница?
Легко будет понять разницу между единицами font-size, когда вы увидите их в действии. Как правило, 1em = 12pt = 16px = 100%. При использовании этих размеров шрифта, давайте посмотрим, что происходит, когда вы увеличиваете базовый размер шрифта (с использованием CSS селектора body) от 100% до 120%.
Изменение Font-size от 100% до 120%.
Как вы можете видеть, «em» и "%" увеличили размер шрифта, в то время как «px» и «pt» этого не сделали. Установка абсолютного размера для вашего текста может быть простым делом, но гораздо лучше для ваших посетителей использовать масштабируемый текст, который может быть отображен на любом устройстве или любой машине. По этой причине, единицы «em» и "%" предпочтительнее в использовании для текста веб-документа.
«em» vs "%"
Мы выяснили что единицы «px» и «pt», не лучшим образом подходят для веб-документов, что заставляет нас использовать «em» и "%". В теории, единицы «em» и "%" являются идентичными, но на практике они имеют незначительные различия, которые важно учитывать.
В приведенном выше примере мы использовали в качестве базовой единицы font-size проценты (в тэге body). Если вы измените вашу базовую единицу font-size c "%" на «em» (то есть body ), вы, должны бы не заметить разницы. Давайте посмотрим, что происходит, когда «1em» является нашей базовой единицей, и когда клиент меняет «Размер шрифта» в настройках своего браузера (такая возможность предусмотрена в во многих браузерах, например, Internet Explorer).
Размер шрифта, когда клиент изменяет размер текста в браузере.
Когда в браузере клиента размер текста установлен в «средней», то незаметно никакой разницы между «em» и "%". Однако, если параметр изменять, разница становится очень большой. При установке «Smallest» «em» гораздо меньше, чем "%", а при установке «Largest» наоборот «em» отображается гораздо большим, чем "%". И хотя многие утверждают, что единицы в «em» масштабируются так, как задумано, на практике текст в «em» масштабируется слишком резко, и при этом наименьший текст становится неразборчивым на некоторых машинах.
Вердикт
В теории, единицы «em» — это новый и предстоящий стандарт размера шрифта в Интернете, но на практике, единицы в "%" позволяют отображать текст для пользователей более последовательно и удобно. При смене параметров клиента, текст в "%" изменялся в разумных пропорциях, что позволяет дизайнерам сохранить читабельность, доступность, и дизайн.
Если вы занимаетесь дизайном сайтов или их разработкой — не используйте абсолютные единицы измерения. А именно — px , in , mm , cm , pt и pc . Это, в дизайне, так же плохо в плане доступности и отзывчивости контента, как использование таблиц в сфере создания макетов страниц. Если взглянуть на все абсолютные единицы измерения, то окажется, что лишь px упрямо не желает нас покидать. Коллективный разум веб-дизайнеров (что правильно!) отказался от применения всех остальных подобных единиц измерения в деле стилизации материалов веб-страниц.
Дизайнеры и разработчики способны осознать абсурдность применения физических единиц измерения расстояний для стилизации цифрового контента, а вот пиксели… похоже, они кажутся всем достаточно «цифровыми». Но они таковыми не являются. Изначально единица измерения px была предназначена для представления физических пикселей на экранах устройств, то есть — для описания наименьших фрагментов изображений, которые можно окрасить в некий цвет. Они больше не привязаны к этому определению. Взгляните на этот материал о пикселях, написанный ещё в 2010 году. Современные браузеры могут рендерить элементы, измеряемые в сотых долях пикселя.
▍изображений?
Не должны ли мы, по совету Джен Симмонс, указывать размеры изображений в пикселях? Да, должны, но в HTML, а не в CSS. При стилизации элементов img или video нужно, для поддержания их в отзывчивом состоянии, использовать относительные единицы измерения и свойство aspect-ratio .
А как насчёт…
▍тонких линий и маленьких отступов?
Обычно границы между объектами, оформляемые с помощью линии наименьшей толщины, делают, в ширину, равными 1px . Браузеры, кроме того, выводят элементы, размеры которых выражены в очень маленьких значениях rem , как имеющие размеры 1px . Поэтому можно не беспокоиться о том, что тончайшая граница просто исчезнет в том случае, если при настройке её ширины использовать не 1px , а 0.0625rem . (Экспериментально выяснено, что Firefox округляет любые размеры, начиная с 0.001 , или 1⁻³. А Webkit-браузеры в этом плане проявляют гораздо большую щедрость, округляя значения в 0.000000000000000000000000000000000000000000000000000000001rem или 1⁻⁵⁶.) Размеры отступов (вроде padding и margin ) не округляются до целых пикселей, они могут быть очень маленькими. Если важно, чтобы размер некоего отступа равнялся бы как минимум 1px , тогда я порекомендовал бы использовать конструкцию вида max(1px, really_small_relative_unit) .
Единицы измерения, привязанные к размерам экрана
vw | 1% ширины вьюпорта |
vh | 1% высоты вьюпорта |
vmin | 1% от меньшего из vw и vh |
vmax | 1% от большего из vw и vh |
Эти единицы предназначены для создания элементов, размер которых должен зависеть от размера окна (вьюпорта).
100vh — это высота вьюпорта, очень удобно для элементов, которые должны растягиваться на всю страницу. Вот пример простой галереи, где каждая картинка будет полностью занимать один экран независимо от размеров окна браузера:
Размеры картинок задаются вот таким образом:
Ширина вьюпорта — 100vw . Это значение позволяет растянуть на ширину экрана любой элемент при любой вложенность.
Если задать элементу ширину 100% , получится ширина родителя, который, скорее всего, занимает только часть экрана, а 100vw позволяет растянуть именно на ширину окна браузера не обращая внимания на размеры родительских элементов.
Правда, тут есть проблема: 100vw — это ширина всего окна вместе с полосой прокрутки, а доступная для контента ширина окна полосу прокрутки не включает, из-за чего при попытке задать элементам ширину вьюпорта появится горизонтальный скролл:
Если нет возможности изменить вёрстку, чтобы избежать использования 100vw , можно задать overflow-x: hidden ближайшему родителю, растянутому на ширину страницы:
Проблема с полосами прокрутки будет видна только в десктопных браузерах, потому что на мобильных скроллбар размещается поверх страницы и не занимает пространство.
Если вы верстаете на MacOS, и полосы прокрутки исчезают сами по себе, выберите в System Perefences/General опцию «Показывать всегда», это позволит верстать страницы сразу с учетом сколлбаров:
Используя vw и vh можно делать полностью резиновые элементы, которые будут сами подстраиваться под размер окна, например, так:
Лучше всего открыть это демо в отдельной вкладке и порастягивать окно браузера.
С помощью vmin можно сделать элемент, который всегда будет целиком помещаться в экран, сохраняя пропорции:
Это демо тоже лучше смотреть в отдельной вкладке, попробуйте порастягивать окно по вертикали и по горизонтали.
В отличие от единиц, привязанных к шрифту, единицы вьюпорта не реагируют на масштабирование страницы. Откройте это демо и поизменяйте масштаб используя Ctrl+ / Ctrl- . Текст, размер которого задан в rem , будет увеличиваться и уменьшаться, текст с размером, заданным в vw , останется неизменным.
Пример с единицами вьюпорта ведёт себя совершенно логично, потому что масштабирование не меняет размер окна. Об этой особенности нужно помнить, если вы захотите использовать единицы вьюпорта для задания размера текста — пользователь не сможет сделать такой текст покрупнее.
В качестве решения предлагается примешивать единицы вьюпорта к относительным единицам измерения, привязанным к размеру шрифта, например, так:
Вживую можно потестить здесь, пример взят из этой статьи. Больше про управление размером шрифта с помощью единиц вьюпорта можно почитать тут.
За дополнение про особенности масштабирования спасибо @bekharsky.
У единиц, привязанных к размерам вьюпорта, могут быть проблемы с поддержкой в IE включая 11-й, поэтому обязательно проверяйте код в действующем браузере.
В спецификации описано немного больше единиц измерения, например:
- cap — высота заглавной буквы
- lh — высота строки
- rlh — высота строки корневого элемента
Но в данный момент они нигде не поддерживаются, поэтому в статье не рассматриваются.
Читайте также: