EM, REM или PX – почему нельзя использовать «только пиксели»
От автора: споры ведутся уже давно – какие единицы измерения использовать в CSS? Мы, как и многие другие, сначала перешли на REM и потом вернулись к любимым пикселям. Мы просто потеряли тот след, почему мы перешли на REM единицы. Проблема связана не только с размером шрифта, но и с доступностью.
Если коротко:
пиксели – это каменный век, не используйте их;
используйте REM для размеров шрифтов и отступов;
используйте EM для медиа запросов.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнееПиксели
За все эти годы мы привыкли к пикселям (px). Все знают, что такое пиксель (хотя размер пикселя не всегда одинаковый, но это тема другой статьи). Всем удобно работать с пикселями, их легко переводить. Дизайнеры работают в пикселях, очень удобно брать размеры прямо из Photoshop и переносить их в верстку.
Так что же не так с пикселями?
Доступность
Я большой сторонник доступности в интернете.
Если вы указываете все шрифты, элементы и отступы в пикселях, вы не уважаете конечного пользователя.
В большинстве браузеров пользователь может сменить размер шрифта по умолчанию (обычно это 16px). Если пользователь указал размер шрифта по умолчанию 20px, все шрифты должны увеличиться пропорционально.
Однако если на сайте четко прописан размер шрифта в пикселях, то заголовок размером 30px всегда будет 30px. От дизайнера/разработчика это может звучать круто, но вы не обычный пользователь. Хватит делать сайты для себя.
Если задать размер шрифта в пикселях, это не убьет всю доступность. Пользователь может изменять масштаб с помощью CTRL+/- (на OSX вместо CTRL клавиша CMD). Но можно ведь сделать все лучше.
Единицы измерения REM
Если вы хоть как-то знакомы с миром веб-дизайна, вы точно слышали про единицы измерения REM. Если все же не знаете, REM – это способ указать размер шрифта на основе размера шрифта корневого HTML элемента. С их помощью также можно быстро изменить размеры во всем проекте, поменяв размер шрифта корневого элемента (например, под определенный медиа запрос/размер экрана).
«REM единицы представляют собой размер шрифта корневого элемента (например, размер шрифта тега ). Если использовать эти единицы измерения для указания размера шрифта корневого элемента, вы получите изначальное значение.»
Как перевести REM в PX
Стандартный пример: размер шрифта html задан в 10px, параграф задан в 1,6rem. 1,6rem*10px = 16px.
Самый распространенный сценарий, который я видел, это установка корневого размера шрифта в 10px с помощью REM. Это позволяет легко и быстро переводить одни значения в другие, просто поделив на 10.
Тем не менее, если задать базовый размер шрифта в пикселях, мы получим ту же проблему, что и в примере выше. Доступность.
У REM единиц есть свои способы применения, однако я готов поспорить, что большинство людей используют REM только потому, что они круче пикселей. Я почти не видел реальных проектов, где специально бы изменяли корневой размер шрифта под определенный размер экрана, и это нормально. Если ваш сайт не нагружен множеством шрифтов, вы вряд ли захотите масштабировать все и сразу.
Так как же нам не ломать доступность?
Задайте размер шрифта корневого HTML элемента в процентах. Проценты будут связаны с размером шрифта в браузере по умолчанию. Обычно ставят размер шрифта на 62,5%. 62,5% от 16px (стандартный размер шрифта по умолчанию) составляют 10px. То есть 1,6rem = 16px. Если пользователь поменяет размер шрифта по умолчанию, например, на 20px, то 1,6rem будут равны 20px. Если пользователь хочет шрифты еще больше, пусть ставит. Счастливый дизайнер, счастливый разработчик. Со всеми числами легко работать.
Идеальный вариант – оставить размер шрифта HTML на 100%, но тогда вычисления станут немного сложнее. Например, 16px будут равны 1rem, а 20px станут 1,25rem, 24px превратятся в 1,5rem и т.д.
Sass/SCSS в помощь
Вычислять все эти числа в голове довольно затруднительно и долго. К счастью, вам не следует беспокоиться, если вы используете один из CSS препроцессоров Sass/SCSS, LESS. Все цифры можно вычислять с помощью функций.
А что по поводу EM единиц измерения?
EM единицы работают почти так же, как REM, пока дело не касается вложенности. Мне никогда не нравились EM, особенно когда нужно задавать размер шрифта. Например, возьмем div с размером шрифта 2em, добавим параграф со шрифтом 2em. Размер параграфа теперь 2em относительно div. Я быстро сбиваюсь в вычислениях, где какой размер. Код быстро становится неудобным. Именно эту проблему решает REM – размер всегда привязывается к корневому элементу.
Что по поводу медиа запросов?
Итак, мы установили, что значения в пикселях переписывают значения браузера по умолчанию, поэтому лучший выход – перевести все пиксели в REM, верно? Не совсем.
В этой статье описываются ключевые различия в использовании пикселей, EM и REM в медиа запросах (https://zellwk.com/blog/media-query-units/). Прочитайте ее и возвращайтесь.
В итоге, и пиксели и REM в медиа запросах проигрывают, когда необходимо изменить масштаб в некоторых браузерах. EM в таких случаях становится наилучшим вариантом. REM здесь проигрывают намного больше, чем пиксели, поэтому мы не будем их рассматривать.
Все становится немного сложнее. У EM и пикселей есть свои минусы с медиа запросами, когда дело касается различий значений с плавающей точкой. Если вы используете min и max медиа запросы в одном блоке кода, то вам придется попотеть, когда пользователь начнет менять масштаб браузера или размер шрифта по умолчанию.
Пара примеров:
Мы используем шесть цифр после точки, так как отдельные браузеры не видят разницы межу 2-5 цифрами после точки.
Пример 1: масштаб в браузере установлен в 100%, ширина окна 640px
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнееmin-width: 64em = Hit max-width: 63.99em = Miss max-width: 63.999999em = Hit min-width: 640px = Hit max-width: 639px = Miss max-width: 639.999999px = Miss
min-width: 64em = Hit max-width: 63.99em = Miss max-width: 63.999999em = Hit min-width: 640px = Hit max-width: 639px = Miss max-width: 639.999999px = Miss |
Пример 1б: масштаб в браузере установлен в 100%, ширина окна 639px
min-width: 64em = Miss max-width: 63.99em = Hit max-width: 63.999999em = Hit min-width: 640px = Miss max-width: 639px = Hit max-width: 639.999999px = Hit
min-width: 64em = Miss max-width: 63.99em = Hit max-width: 63.999999em = Hit min-width: 640px = Miss max-width: 639px = Hit max-width: 639.999999px = Hit |
Нельзя использовать 6 цифр после точки для EM, это запускает оба медиа запроса. Пример 2: масштаб в браузере установлен в 110%, ширина окна 704px (так как 640px*110% = 704px)
min-width: 64em = Miss max-width: 63.99em = Miss max-width: 63.999999em = Hit min-width: 640px = Miss max-width: 639px = Miss max-width: 639.999999px = Hit
min-width: 64em = Miss max-width: 63.99em = Miss max-width: 63.999999em = Hit min-width: 640px = Miss max-width: 639px = Miss max-width: 639.999999px = Hit |
Пример 2б: масштаб в браузере установлен в 110%, ширина окна 705px
min-width: 64em = Hit max-width: 63.99em = Miss max-width: 63.999999em = Miss min-width: 640px = Hit max-width: 639px = Miss max-width: 639.999999px = Miss
min-width: 64em = Hit max-width: 63.99em = Miss max-width: 63.999999em = Miss min-width: 640px = Hit max-width: 639px = Miss max-width: 639.999999px = Miss |
Мы не можем использовать две цифры после точки для EM. Нам осталось использовать 6dp. Это работает с зумом в браузерах. Однако… Пример 3: масштаб в браузере установлен в 100%, размер шрифта 20px, ширина окна 800 (640*125% = 800)
min-width: 64em = Hit max-width: 63.99em = Miss max-width: 63.999999em = Hit
min-width: 64em = Hit max-width: 63.99em = Miss max-width: 63.999999em = Hit |
И опять, 6dp для EM использовать нельзя. Нельзя использовать пиксели для медиа запросов, так как они запускают оба запроса 640px/639px, потому что игнорируются EM/REM.
Какой же выход?
К сожалению, ответа нет. Пока браузеры не решат проблемы с округлением, вы в западне. Простейший выход – не создавать min-width и max-width в одном блоке. Пример:
body { @media screen and (max-width: 63.99em) { background: blue; } @media screen and (min-width: 64em) { background: blue; } }
body { @media screen and (max-width: 63.99em) { background: blue; }
@media screen and (min-width: 64em) { background: blue;} } |
Проблема с кодом выше заключается в том, что есть сценарии, когда будут запущены или проигнорированы оба медиа запроса. Так что лучше всего писать что-то такое:
body { background: blue; @media screen and (min-width: 64em) { background: blue; } }
body { background: blue;
@media screen and (min-width: 64em) { background: blue; } } |
Почему не существует реального решения? Мне кажется, люди особо об этом не думают. Любая статистика, где говорится, что люди не меняют размер шрифта в браузере по умолчанию, искажает правду. Опция по изменению размера шрифта в Chrome похоронена в продвинутых настройках.
Ловушки
У данного подхода есть несколько ловушек:
если вы привыкли писать min-width и max-width медиа запросы в одном блоке кода, то вам придется ждать еще дольше;
возрастает сложность, так как вам придется переписать CSS в одну из сторон, вместо того, чтобы просто сказать браузеру, чтобы тот использовал вариант А или B;
возрастает размер файла из-за перезаписей, несильно, но это стоит учесть.
В зависимости от проекта, кто его разрабатывает и таких факторов, как бюджет (нужно быть реалистами), пиксели будут намного проще и быстрее. Намного проще и быстрее игнорировать доступность.
Помните, для кого вы создаете сайты. Проблемы, затронутые в этом посте, актуальны на момент написания, однако постоянные обновления браузеров могут оставить их в прошлом.
Источник: http://engageinteractive.co.uk/
Редакция: Команда webformyself.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
PSD to HTML
Практика верстки сайта на CSS Grid с нуля
СмотретьКонвертер px в rem
Базовый размер шрифта px
Введите известное значение в соответствующем поле:
Таблица значений rem для 16px
Измените базовое значение размера шрифта чтобы в таблице отобразились значения для нужного базового размера
| px | rem |
|---|---|
| 18 | |
| 19 | |
| 20 | |
| 21 | |
| 22 | |
| 23 | |
| 24 | |
| 25 | |
| 26 | |
| 27 |
| px | rem |
|---|---|
| 28 | |
| 29 | |
| 30 | |
| 31 | |
| 32 | |
| 33 | |
| 34 | |
| 35 | |
| 36 | |
| 37 |
| px | rem |
|---|---|
| 38 | |
| 39 | |
| 40 | |
| 41 | |
| 42 | |
| 43 | |
| 44 | |
| 45 | |
| 46 | |
| 47 |
Теория
px (пиксель) — это единица измерения размеров для экранов (мониторов). Используется для максимально конкретного и точного задания размеров.
rem – задаёт размер относительно размера шрифта заданного для тега <html>, используется для удобства глобального масштабирования: элементы которые планируется масштабировать, задаются в rem.
Чтобы размер шрифта масштабировался для устройств с разным расширением экрана, в css через медиа-запросы задают базовый размер шрифта для тега <html> для разных размеров экранов. Пример:
html {
font-size: 16px;
}
@media (max-width: 576px) {
html {
font-size: 13px;
}
}
@media (max-width: 768px) {
html {
font-size: 14px;
}
}
@media (max-width: 992px) {
html {
font-size: 15px;
}
}
***Данные размеры для свойства font-size не являются рекомендуемыми. Они просто взяты как пример. Размер напрямую зависит от используемого шрифта и его особенностей. При этом сами значения для font-size не обезательно должны быть целыми числами, а могут быть десятичными дробями: font-size: 15.7575px, что очень часто практекуется в различный css-фреймворках.
Формула для перевода из px в rem
Для перевода значений из пикселей в rem применяется следующая формула:
rem = \dfrac{px}{\text{База}}
- rem — значение в rem
- px — значение в пикселях
- База — базовый размер шрифта
Похожие калькуляторы:
шпаргалка.ру — Уроки по созданию сайтов с нуля. Создание сайтов под заказ
Ежедневно десятки тысяч пользователей бескрайней сети интернет задаются вопросом: как создать сайт? Многие считают, что это очень сложно и новичку с этой задачей самостоятельно справиться попросту нереально. Но это глубокое заблуждение, так как на самом деле все очень просто.
Для того чтобы быстро и легко, а главное бесплатно сделать собственный сайт, достаточно воспользоваться одним из многочисленных бесплатных сервисов по конструированию и хостингу сайтов. Это может быть, например Яндекс или uCoz. Воспользовавшись данными сервисами, любой пользователь сможет с легкостью создать свой сайт самостоятельно. Но бесплатный сыр, как известно, бывает только в мышеловке. Если вы воспользуетесь бесплатных сервисов по конструированию сайтов, то будьте готовы к тому, что вскоре на вашем сайте появится чужая реклама, а снять ее можно будет только за деньги.
Чтобы самому создавать сайты абсолютно не нужно обладать какими-то особыми знаниями. Но если необходимо более эстетичное и индивидуальное оформление, то необходимо изучить основы HTML и CSS. Это необходимо для того, чтобы вручную редактировать код страниц, так как бесплатные сервисы предлагают ограниченный функционал для создания индивидуального дизайна. Если вам необходимо создать динамический сайт (интернет магазин, форум) то для этого достаточно изучить основы php и JavaScript.
На сайте «web-shpargalka» вы найдете полезные программы, которые облегчат работу при разработке проектов также в разделе «Как сделать…?» подробно описывается, как сделать корзину покупателя для интернет магазина, форму регистрации, форму авторизации, установка видео и аудио плееров, и другие готовые примеры которые могут пригодиться для вашего web-проекта.
Также рекомендую посетить следующие разделы:
Cайт-визитка за один день!!! 
Повторяя за мной все действия, вы 100% создадите собственный сайт визитку за 1 день (с нуля, не используя чужих движков)! Но я убежден, что если вы добавите немного креатива, то у вас всё получиться гораздо лучше!!! Подробнее…
Анализатор текста!
Подсчёт символов и ключевых слов, а также перевод текста из кириллицы в латиницу, и кое-что еще…! Подробнее…
Генератор случайных чисел для игры в гос-лото!
Можно генерировать случайные числа для игры в гос-лото, также можно проверить все билеты на совпадения и сумму выигрыша. Иначе говоря, тренируйтесь играть в гос-лото с нулевыми затратами! Подробнее…
Интуит-тестер (тренажер)
С помощью этого тренажера, вы можете проверить свою интуицию, и в случае если результат вас не устроит, то можно сразу-же приступить к ее тренировке 🙂 Подробнее…
Должен ли я использовать единицы измерения px или rem в моем CSS?
Я хотел бы похвалить ответ josh4736 за предоставление некоторого превосходного исторического контекста. Хотя это хорошо сформулировано, ландшафт CSS изменился за почти пять лет, прошедших с тех пор, как был задан этот вопрос. Когда этот вопрос был задан, px был правильным ответом,но сегодня это уже не так.
tl;dr: используйте rem
Обзор Блока
Исторически px подразделения, как правило, представляет собой один пиксель устройства. С устройствами, имеющими все более высокую плотность пикселей, это больше не относится ко многим устройствам, таким как дисплей Retina от Apple.
rem единиц представляют собой размер r oot em . Это font-size из того, что соответствует :root . В случае с HTML это элемент <html> ; для SVG это элемент <svg> . Значение по умолчанию font-size в каждом browser* равно 16px .
На момент написания статьи rem поддерживается примерно 98% пользователями . Если вас беспокоит этот другой 2%,, я напомню вам, что media запросов также поддерживаются примерно 98% пользователей .
При Использовании px
Большинство примеров CSS в интернете используют значения px , поскольку они были стандартом де-факто. Теоретически можно было бы использовать pt , in и множество других единиц измерения, но они не справлялись с малыми значениями, так как вам быстро пришлось бы прибегнуть к дробям, которые были длиннее для ввода и сложнее для рассуждения.
Если вам нужна тонкая граница , с px вы можете использовать 1px, с pt вам нужно будет использовать 0.75pt для последовательных результатов, и это просто не очень удобно.
При Использовании rem
Значение по умолчанию rem, равное 16px , не является очень сильным аргументом для его использования. Писать 0.0625rem хуже , чем писать 0.75pt, так зачем кому-то использовать rem ?
Есть две части преимущества rem над другими единицами.
- Предпочтения пользователей соблюдаются
- Вы можете изменить кажущееся значение
pxизremна любое другое
Уважение Пользовательских Предпочтений
Масштабирование браузера сильно изменилось за эти годы. Исторически многие браузеры только увеличивали масштаб font-size, но это изменилось довольно быстро, когда веб-сайты поняли, что их красивые пиксельные конструкции ломаются каждый раз, когда кто-то увеличивал или уменьшал масштаб. В этот момент браузеры масштабируют всю страницу, так что масштабирование на основе шрифтов не входит в картину.
Уважение пожеланий пользователя не является чем-то из ряда вон выходящим. Просто потому, что браузер установлен на 16px по умолчанию, не означает, что любой пользователь не может изменить свои предпочтения на 24px или 32px , чтобы исправить плохое зрение. Если вы основываете свои единицы измерения на rem, любой пользователь с более высоким размером шрифта увидит пропорционально больший сайт. Границы будут больше, заполнение будет больше, поля будут больше, все будет увеличиваться плавно.
Если вы основываете свои запросы media на rem, вы также можете убедиться, что сайт, который видят ваши пользователи, соответствует их экрану. Пользователь с параметром font-size , установленным на 32px в широком браузере 640px , будет эффективно видеть ваш сайт, как показано пользователю на 16px в широком браузере 320px . В использовании rem нет абсолютно никаких потерь для RWD .
Изменение Видимого Значения px
Поскольку rem основан на font-size узла :root , если вы хотите изменить то, что представляет 1rem , все, что вам нужно сделать, это изменить font-size :
:root {
font-size: 100px;
}
body {
font-size: 1rem;
}<p>Don't ever actually do this, please</p> Что бы вы ни делали, не устанавливайте font-size элемента :root в значение px .
Если вы установите значение font-size на html в значение px , вы уничтожили предпочтения пользователя, не имея возможности вернуть их обратно.
Если вы хотите изменить кажущееся значение rem, используйте % единицы измерения.
Математика для этого достаточно прямолинейна.
Видимый размер шрифта :root равен 16px , но давайте предположим, что мы хотим изменить его на 20px . Все, что нам нужно сделать, это умножить 16 на некоторое значение, чтобы получить 20 .
Настройте свое уравнение:
16 * X = 20
И решить для X :
X = 20 / 16
X = 1.25
X = 125%
:root {
font-size: 125%;
}<p>If you're using the default font-size, I'm 20px tall.</p>Делать все в кратных числах 20 не так уж и здорово, но общее предложение состоит в том, чтобы сделать видимый размер rem равным 10px . Магическое число для этого- 10/16 , то есть 0.625 , или 62.5% .
:root {
font-size: 62.5%;
}<p>If you're using the default font-size, I'm 10px tall.</p>Проблема теперь заключается в том, что значение по умолчанию font-size для rest страницы слишком мало, но есть простое исправление для этого: установите font-size на body с помощью rem :
:root {
font-size: 62.5%;
}
body {
font-size: 1.6rem;
}<p>I'm the default font-size</p>Важно отметить, что при такой корректировке видимое значение rem равно 10px , что означает, что любое значение, которое вы могли бы записать в px , может быть преобразовано непосредственно в rem , наткнувшись на десятичный знак.
padding: 20px;
превращается в
padding: 2rem;
Видимый размер шрифта, который вы выбираете, зависит от вас, поэтому, если вы хотите, нет никаких причин, по которым вы не можете использовать:
:root {
font-size: 6.25%;
}
body {
font-size: 16rem;
}
и иметь 1rem равным 1px .
Так что у вас есть это простое решение, чтобы уважать пожелания пользователей, а также избежать чрезмерного усложнения вашего CSS.
Погоди, Так в чем же подвох?
Я боялся, что ты спросишь об этом. Как бы мне ни хотелось притвориться, что rem -это магия, а solves-all-things-это магия, все же есть некоторые примечательные моменты. На мой взгляд, ничего особенного, но я собираюсь вызвать их, чтобы вы не могли сказать, что я вас не предупреждал.
Media запросов
Одна из первых проблем, с которой вы столкнетесь с rem , связана с media запросами. Рассмотрим следующий код:
:root {
font-size: 1000px;
}
@media (min-width: 1rem) {
:root {
font-size: 1px;
}
}
Здесь значение rem изменяется в зависимости от того, применяется ли media-запрос, а запрос media зависит от значения rem , так что же происходит?
rem в media запросах использует начальное значение font-size и не учитывает никаких изменений, которые могли произойти с font-size элемента :root . Другими словами, его кажущееся значение всегда равно 16px .
Это немного раздражает, потому что это означает, что вы должны сделать некоторые дробные вычисления, но я обнаружил, что большинство распространенных запросов media уже используют значения, кратные 16.
| px | rem |
+------+-----+
| 320 | 20 |
| 480 | 30 |
| 768 | 48 |
| 1024 | 64 |
| 1200 | 75 |
| 1600 | 100 |
Кроме того, если вы используете препроцессор CSS, вы можете использовать микшины или переменные для управления запросами media, что полностью скроет проблему.
переключение контекста
Если вы переключаетесь между различными проектами, вполне возможно, что видимый размер шрифта rem будет иметь разные значения. В одном проекте вы можете использовать видимый размер 10px , в то время как в другом проекте видимый размер может быть 1px . Это может привести к путанице и вызвать проблемы.
Моя единственная рекомендация здесь-придерживаться 62.5% , чтобы преобразовать rem в очевидный размер 10px, потому что это было более распространено в моем опыте.
Общие Библиотеки CSS
Если вы пишете CSS, который будет использоваться на сайте, который вы не контролируете, например, для встроенного виджета, нет никакого хорошего способа узнать, какой видимый размер будет иметь rem . Если это так, не стесняйтесь продолжать использовать px .
Однако если вы все еще хотите использовать rem , попробуйте выпустить версию Sass или LESS таблицы стилей с переменной, чтобы переопределить масштабирование для видимого размера rem .
* Я не хочу никого отпугивать от использования rem, но я не смог официально подтвердить, что каждый браузер использует 16px по умолчанию. Видите ли, существует множество браузеров, и было бы не так уж трудно для одного браузера немного отклониться, скажем, от 15px или 18px . В тестировании, однако, я не видел ни одного примера, когда браузер, использующий настройки по умолчанию в системе, использующей настройки по умолчанию, имел какое-либо значение, отличное от 16px . Если вы найдете такой пример, пожалуйста, поделитесь им со мной.
Должен ли я использовать единицы измерения px или rem в моем CSS? (html, units-of-measurement, css, css3, distance)
TL; DR: использовать px.
Во-первых, крайне важно знать, что согласно спецификации, единица измерения CSS
pxне равна одному физическому пикселю отображения. Это всегда было правдой — даже в спецификации CSS 1 в 1996 году.CSS определяет эталонный пиксель, который измеряет размер пикселя на дисплее с разрешением 96 точек на дюйм. На дисплее с разрешением dpi, существенно отличающимся от 96 dpi (как на дисплеях Retina), пользовательский агент изменяет размер модуля
pxчтобы его размер соответствовал размеру эталонного пикселя. Другими словами, именно это изменение масштаба является именно тем, почему 1 пиксель CSS равен 2 физическим пикселям дисплея Retina.Тем не менее, вплоть до 2010 года (и мобильная ситуация зумирования несмотря на это), то
pxпочти всегда, равный один физический пиксель, потому что все широко доступные дисплеи были вокруг 96dpi.Размеры, указанные в
emотносятся к родительскому элементу. Это приводит кem«компаундирования проблемы», где вложенные элементы становятся все больше или меньше. Например:body { font-size:20px; } div { font-size:0.5em; }Дает нам:
<body> - 20px <div> - 10px <div> - 5px <div> - 2.5px <div> - 1.25pxCSS3
rem, который всегда относится только к корневому элементуhtml, теперь поддерживается в 96% всех используемых браузеров.
Я думаю, что все согласны с тем, что было бы хорошо, чтобы ваши страницы были удобными для всех и учитывали проблемы со зрением. Одно из таких соображений (но не единственное!) Позволяет пользователям сделать текст вашего сайта больше, чтобы его было легче читать.
В начале, единственный способ предоставить пользователям способ масштабирования размера текста — использовать относительные единицы размера (например, em). Это связано с тем, что в меню размера шрифта браузера просто изменился размер корневого шрифта. Таким образом, если вы указали размеры шрифта в px, они не будут масштабироваться при изменении параметра размера шрифта в браузере.
Современные браузеры (и даже не очень современный IE7) все изменили метод масштабирования по умолчанию, чтобы просто увеличивать все, включая изображения и размеры блоков. По сути, они делают опорный пиксель больше или меньше.
Да, кто — то еще могут изменить свой браузер стилей по умолчанию для настройки размера шрифта по умолчанию (эквивалент варианта размера шрифта старого стиля), но это очень эзотерический способ не собираюсь об этом, и я бы пари, никто 1 делает это. (В Chrome он скрыт под расширенными настройками, веб-контентом, размерами шрифта. В IE9 он еще более скрыт. Вы должны нажать Alt и перейти к View, Text Size.) Гораздо проще просто выбрать опцию Zoom в главное меню браузера (или используйте Ctrl + +/-/колесико мыши).
1 — в пределах статистической погрешности, естественно
Если предположить, что большинство пользователей масштабируют страницы с помощью опции масштабирования, я нахожу относительные единицы большей частью неактуальными. Разработать вашу страницу намного проще, когда все указано в одном блоке (все изображения обрабатываются в пикселях), и вам не нужно беспокоиться о компоновке. («Мне сказали, что математики не будет» — там нужно вычислить