Почему em вместо px?
https://stackoverflow.com/questions/609517
-
03-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianВопрос
Я слышал, что вы должны определять размеры и расстояния в своей таблице стилей с помощью em, а не в пикселях.Итак, вопрос в том, почему я должен использовать em вместо px при определении стилей в css?Есть ли хороший пример, который иллюстрирует это?
Решение 3
Причина, по которой я задал этот вопрос, заключалась в том, что я забыл, как использовать em'ы, поскольку какое-то время я радостно взламывал CSS. Люди не заметили, что я держал вопрос в общих чертах, поскольку я не говорил о подборе шрифтов как таковых. Меня больше интересовало, как определить стили для любого данного элемента блока на странице.
Как Хенрик Пол и другие указали, что em пропорционально размер шрифта, используемый в элементе. Распространенной практикой является определение размеров элементов блока в px, однако выбор шрифтов в браузерах обычно нарушает этот дизайн. Изменение размера шрифтов обычно выполняется с помощью сочетаний клавиш Ctrl + + или Ctrl + - . Поэтому хорошей практикой является использование вместо них.
Использование px для определения ширины
Вот иллюстративный пример. Скажем, у нас есть тег div, который мы хотим превратить в стильное поле для дат, у нас может быть HTML-код, который выглядит следующим образом:
<div class="date-box">
<p class="month">July</p>
<p class="day">4</p>
</div>
Простая реализация будет определять ширину класса date-box в px:
* { margin: 0; padding: 0; }
p.month { font-size: 10pt; }
p.day { font-size: 24pt; font-weight: bold; }
div.date-box {
background-color: #DD2222;
font-family: Arial, sans-serif;
color: white;
width: 50px;
}
Проблема
Однако, если мы хотим увеличить размер текста в нашем браузере, дизайн будет нарушен. Текст будет также выделяться за рамками, что почти совпадает с тем, что происходит с дизайном SO: Флодин указывает. Это связано с тем, что поле будет иметь такой же размер по ширине, как и для 50px .
Использование вместо них
Более разумный способ - вместо этого определить ширину в ems:
div.date-box {
background-color: #DD2222;
font-family: Arial, sans-serif;
color: white;
width: 2.5em;
}
* { margin: 0; padding: 0; font-size: 10pt; }
// Initial width of date-box = 10 pt x 2.5 em = 25 pt
// Will also work if you used px instead of pt
Таким образом, у вас есть гибкий дизайн для блока даты, то есть размер блока будет увеличиваться вместе с текстом пропорционально размеру шрифта, определенному для блока даты. В этом примере размер шрифта определен в * как 10pt и увеличится в 2,5 раза до этого размера шрифта. Поэтому, когда вы изменяете размер шрифта в браузере, размер окна будет в 2,5 раза больше размера шрифта.
Другие советы
Неправильно говорить, что одно из них является лучшим выбором, чем другое (иначе обоим не было бы указано их собственное назначение в спецификации).Возможно, даже стоит отметить, что StackOverflow широко использует пиксельные блоки.Это не такой уж плохой выбор, как говорили Спойку.
Определение единиц измерения
px является абсолютной единицей измерения (например в, Очки, или СМ) это также составляет 1/96 от в единица измерения (подробнее о том, почему позже).Поскольку это абсолютное измерение, его можно использовать в любое время, когда вы хотите определить определенный размер чего-либо, а не пропорционально чему-то другому, например размеру окна браузера или размеру шрифта.
Как и все другие абсолютные единицы измерения, px единицы измерения не масштабируются в зависимости от ширины окна браузера.Таким образом, если во всем дизайне вашей страницы используются абсолютные единицы измерения, такие как px вместо того , чтобы %, он не будет адаптироваться к ширине браузера.По сути, это не хорошо и не плохо, просто дизайнеру нужно сделать выбор между соблюдением точного размера и гибкостью в сравнении с растягиванием, но при этом не придерживаться точного размера.Для сайта было бы типично иметь сочетание объектов фиксированного и гибкого размера.
Часто на страницу необходимо включить элементы фиксированного размера, такие как рекламные баннеры, логотипы или иконки.Это гарантирует, что вам почти всегда понадобится как минимум некоторые измерения на основе пикселей в проекте.Изображения, например, будут (по умолчанию) масштабироваться таким образом, чтобы размер каждого пикселя составлял 1 * пиксель *, поэтому, если вы разрабатываете дизайн вокруг изображения, вам понадобится px единицы измерения.Это также очень полезно для точного определения размера шрифта и ширины границ, где из-за округления его имеет наибольший смысл использовать px единицы измерения для большинства экранов.
Все абсолютные измерения жестко связаны друг с другом;это, 1 дюйм является всегда 96 пикселей, точно так же , как 1 дюйм является всегда 72pt.(Обратите внимание, что 1 дюйм на самом деле это почти никогда не бывает физическим дюйм когда речь идет об экранных МЕДИА).Все абсолютные измерения предполагают номинальное разрешение экрана 96ppi и номинальное расстояние просмотра настольного монитора, и на таком экране можно px будет равно единице физический пиксель на экране и один в будет равно 96 физическим пикселям.На экранах, которые значительно отличаются либо плотностью пикселей, либо расстоянием просмотра, или если пользователь увеличил страницу с помощью функции масштабирования браузера, px больше не обязательно будет относиться к физическим пикселям.
em не является абсолютной единицей измерения - это единица измерения, которая относится к текущему выбранному размеру шрифта.Если только вы не переопределили стиль шрифта, установив размер шрифта в абсолютной единице (например, px или Очки), на это будет влиять выбор шрифтов в браузере пользователя или операционной системе, если они его создали, поэтому не имеет смысла использовать em в качестве общей единицы длины, за исключением случаев, когда вы специально хотите, чтобы она масштабировалась по мере увеличения размера шрифта.
Использование em когда вы специально хотите, чтобы размер чего-либо зависел от текущего размера шрифта.
% также является относительной единицей измерения, в данном случае, относительно высоты или ширины родительского элемента.Они являются хорошей альтернативой px единицы измерения для таких вещей, как общая ширина дизайна, если ваш дизайн не зависит от определенных размеров пикселей для установки его размера.
Используя % единицы измерения в вашем дизайне позволяют вашему дизайну адаптироваться к ширине экрана / устройства, в то время как использование абсолютных единиц измерения, таких как px не делает этого.
У меня небольшой ноутбук с высоким разрешением, и я должен запускать Firefox с 120% -ным масштабированием текста, чтобы читать без косоглазия.
Многие сайты имеют проблемы с этим. Макет становится искаженным, текст в кнопках разрезается пополам или полностью исчезает. Даже stackoverflow.com страдает от этого:
Обратите внимание, как верхние кнопки и вкладки страницы перекрываются. Если бы они использовали единицы em вместо px, проблем бы не было.
Самый популярный ответ здесь от Томаса Раттера верен в его ответе о em.Но очень, очень ошибается в размере пикселя.Поэтому, даже несмотря на то, что она старая, я не могу допустить, чтобы она оставалась неизменной.
Экран компьютера обычно НЕ ИМЕЕТ разрешения 96 точек на дюйм!(Или ppi, если вы хотите быть педантичным.)
Пиксель НЕ имеет фиксированного физического размера.
(Да, это зафиксировано внутри один только экран, но на следующем экране пиксель, скорее всего, больше или меньше, и уж точно НЕ 1/96 дюйма.)
Доказательство
Нарисуйте линию длиной 960 пикселей.Измерьте это с помощью обычной линейки.Это 10 дюймов?Нет?..
Подключите свой ноутбук к телевизору.Сейчас линия составляет 10 дюймов?Все еще нет?
Покажите эту строку на вашем iPhone.Все тот же размер?Почему бы и нет?
Кто, черт возьми, придумал миф о компьютерном экране с разрешением 96 точек на дюйм?
(Некоторые религии оперируют мифом о 72dpi.Но в равной степени неверно.)
Это полезно для всего, что должно масштабироваться в соответствии с размером шрифта.
Это особенно полезно в браузерах, которые реализуют масштабирование путем масштабирования размера шрифта. Поэтому, если вы масштабируете все свои элементы, используя em , они соответственно масштабируются.
Потому что они ( http://en.wikipedia.org/wiki/Em_(typography ) ) прямо пропорционально размеру используемого в данный момент шрифта. Если размер шрифта, скажем, 16 пунктов, то один из них составляет 16 пунктов. Если размер шрифта составляет 16 пикселей ( примечание : не совпадает с точками), один em составляет 16 пикселей.
Это приводит к двум (связанным) вещам:
<Ол>пример:
Код:body{font-size: 10px;} // оставьте на 10 все размеры ниже правильных, измените это значение, а остальные измените на, например1,4 от этого значения
1{размер шрифта: 1.2em;} //12 пикселей
2{размер шрифта: 1.4em;} //14 пикселей
3{размер шрифта: 1.6em;} //16 пикселей
4{размер шрифта: 1,8em;} //18 пикселей
5{размер шрифта: 2em;} //20 пикселей
…
Тело
1
2
3
4
5
при изменении значения в body остальное изменяется автоматически, чтобы в несколько раз превышать базовое значение…
10×2=20 10 × 1,6= 16 и т.д.
вы могли бы иметь базовое значение как 8 пикселей ... так что 8×2=16 8 × 1,6 = 12,8 // может быть округлено браузером
Очень практичная причина заключается в том, что IE 6 не позволяет вам изменять размер шрифта, если он указан с помощью px, тогда как это возможно, если вы используете относительные единицы измерения, такие как em или проценты.Запрещение пользователю изменять размер шрифта очень плохо сказывается на доступности.Несмотря на то, что он находится в упадке, по-прежнему много пользователей IE 6.
используйте px для точного размещения графических элементов. используйте em для измерений, для которых требуется позиционирование и расстояние между текстовыми элементами, такими как высота строки и т. д. px с точностью до пикселя, em может динамически изменяться в зависимости от используемого шрифта
Основная причина использования em или процентов состоит в том, чтобы позволить пользователю изменять размер текста, не нарушая дизайн. Если вы разрабатываете шрифты, указанные в px, они не изменяют размер (в IE 6 и других), если пользователь выбирает размер текста - больше . Это очень плохо для пользователей с визуальными недостатками.
Несколько примеров и статей по подобным конструкциям (есть множество вариантов выбора) см. в последнем выпуске A List Apart: Жидкостные сетки , старая статья Как изменить размер текста в CSS или пуленепробиваемый веб-дизайн Дана Седерхольма .
Ваши изображения должны по-прежнему отображаться с размерами в пикселях, но, как правило, не рекомендуется форматировать текст с помощью px.
Насколько я лично презираю IE6, в настоящее время это браузер only , одобренный для большинства пользователей нашей компании из списка Fortune 200.
Существует простое решение, если вы хотите использовать px для указания размера шрифта, но при этом хотите использовать его в удобном для вас месте, поместив его в свой файл CSS:
body {
font-size: 62.5%;
}
Теперь укажите p (и другие) теги, подобные этим:
p {
font-size: 0.8em; /* This is equal to 8px */
font-size: 1.0em; /* This is equal to 10px */
font-size: 1.2em; /* This is equal to 12px */
font-size: 2.0em; /* This is equal to 20px */
}
И так далее.
Возможно, вы захотите использовать em для размеров шрифта, пока IE6 не исчезнет (с вашего сайта). Px будет в порядке, когда масштабирование страницы (в отличие от масштабирования текста) станет стандартным поведением.
Traingamer уже предоставил необходимые ссылки .
Общий консенсус заключается в использовании процентов для определения размера шрифта, поскольку он более согласован для всех браузеров / платформ.
Это забавно, я всегда использовал pt для определения размера шрифта, и я предположил, что все сайты использовали это. Обычно вы не используете размеры px в других приложениях (например, Word). Я предполагаю, что это потому, что они предназначены для печати - но размер в веб-браузере такой же, как в Word ...
