Размер шрифта в CSS -% или em?
Ответы 8
От http://archivist.incutio.com/viewlist/css-discuss/1408
%: Some browsers doesn't handle percent for font-size but interprets 150% as 150px. (Some NN4 versions, for instance.) IE also has problems with percent on nested elements. It seems IE uses percent relative to viewport instead of relative to parent element. Yet another problem (though correct according to the W3C specs), in Moz/Ns6, you can't use percent relative to elements with no specified height/width.
em: Sometimes browsers use the wrong reference size, but of the relative units it's the one with least problems. You might find it interpreted as px sometimes though.
pt: Differs greatly between resolutions, and should not be used for display. It's quite safe for print use though.
px: The only reliable absolute unit on screen. It might be wrongly interpreted in print though, as one point usually consist of several pixels, and thus everything becomes ridiculously small.
Насчет рт. У меня был отличный аргумент по поводу /. об этом (и проиграл). У меня была такая же точка зрения, как и у вас, приятно знать, что кто-то разделяет эту точку зрения :)
Вы действительно говорите, что некоторые пользователи Netscape Navigator 4 не смогут правильно просматривать мою страницу, если я буду использовать проценты для размеров шрифта?
Процитированное обсуждение относится к 2002 году. Это все еще актуально? Есть ли какие-нибудь браузеры, которые активно используют em или% ошибок?
Ссылки на ошибки в браузерах 20-летней давности - бесполезный ответ.
Оба регулируют размер шрифта относительно того, что было. 1.5em то же самое, что и 150%. Единственным преимуществом, похоже, является удобочитаемость, выбирайте то, что вам удобнее.
Может ли кто-нибудь объяснить мне, почему это отклоняется? Именно так я понял разницу между em и процентом. В настоящее время нет никаких преимуществ в использовании одного перед другим. Важно то, что вы используете размер, соответствующий базовому размеру шрифта.
Спасибо, Ли, я только что протестировал это в IE6, IE7, Firefox 3, Safari 3, Opera 9.5 и Google Chrome, все в Windows, и все они кажутся мне одинаковыми! <p style = "font-size: 0.6em;"> это тест </p> <p style = "font-size: 60%;"> это тест </p>
На Список отдельно есть действительно хорошая статья о веб-типографике.
Их вывод:
Sizing text and line-height in ems, with a percentage specified on the body (and an optional caveat for Safari 2), was shown to provide accurate, resizable text across all browsers in common use today. This is a technique you can put in your kit bag and use as a best practice for sizing text in CSS that satisfies both designers and readers.
На самом деле line-heights лучше вообще пишется без каких-то модулей. Это разрешено спецификацией и полностью позволяет избежать некоторых действительно раздражающих особенностей браузера, когда речь идет о высотах строк на основе em.
Я хочу, чтобы люди знали, что эта статья написана в 2007 году. С тех пор современные браузеры стали более распространенными, а современные браузеры обычно увеличивают масштаб вместо увеличения размера шрифта по умолчанию. Из-за этого «px» стал более распространенным и, на мой взгляд, лучшим подходом. Конечно, это спорный вопрос, но я лично столкнулся с проблемами в проектах из-за вложенности Эма.
@ Mohag519 Их гнездование - опасная ловушка. :)
@ Mohag519, разве px не даст вам что-то намного меньшее, чем предполагалось для мобильных устройств с высокой плотностью пикселей? Я не думаю, что мы хотим, чтобы наши сайты были такими же, как на настольных компьютерах, но очень маленькими на мобильных устройствах;)
@ johnb003 Такие мобильные устройства имеют соотношение пикселей устройства больше, чем 1. Например, iPhone 4 имеет физическую ширину экрана 640 пикселей, но отображается как 320 пикселей CSS (DPR = 2). Так что сайт меньше не кажется!
Как отмечает Галвэнг, px является наиболее надежным для веб-типографики, поскольку все остальное, что вы делаете на странице, в основном оформляется со ссылкой на монитор компьютера. Проблема с абсолютными размерами заключается в том, что браузеры немного (IE) не масштабируют элементы с пиксельным значением на веб-странице, поэтому, когда вы пытаетесь включить / выключить зум, все настраивается, кроме этих элементов.
Я не знаю, правильно ли это обрабатывает IE8, но все другие поставщики браузеров отлично справляются с пикселями, и это все еще меньшинство, когда пользователю нужно увеличивать / уменьшать текст (это текстовое поле на SO, возможно, является исключением). Если вы хотите по-настоящему испачкаться, вы всегда можете добавить функцию javascript для увеличения размера текста и предложить пользователю кнопку «маленький» / «большой».
IE7 отлично масштабирует значения пикселей, если вы используете масштабирование. В IE6 не было масштабирования, только размер текста. Масштабирование стало обязательным требованием из-за того, что дизайнеры использовали фиксированные масштабы пикселей, а не позволяли переформатировать страницу при изменении размера текста.
Это по-прежнему проблема с IE6, но, опять же, ВСЕ по-прежнему является проблемой с IE6. Хотя в прошлом я избегал пикселей из-за этого, концепция масштабирования веб-страницы в целом (по сравнению с просто текстом) стала стандартной, и я обнаружил, что использую px гораздо чаще.
Библиотека пользовательского интерфейса Yahoo (http://developer.yahoo.com/yui/) имеет хороший набор базовых классов css, используемых для «сброса» специфических настроек браузера, так что основа для отображения сайта одинакова для всех (поддерживаемых) браузеров.
В YUI предполагается использовать проценты.
Я использовал сброс YUI, но потом понял, что настройки размера текста в браузерах НЕ РАБОТАЮТ! Не вижу смысла использовать%, если у вас установлен пиксель для тела, поскольку это нарушает настройки размера текста.
Учитывая, что (почти?) Все браузеры теперь изменяют размер страницы в целом, а не только текста, предыдущие проблемы с px, % и em с точки зрения доступного изменения размера шрифта довольно спорные.
Итак, ответ таков, что это, вероятно, не имеет значения. Используйте то, что вам подходит.
%is nice because it allows for relative resizing.
pxis nice because it's fairly easy to manage expectations when using it.
emcan be useful when also used for layout elements as it can allow for proportional sizing related to the text size.
Вводящий в заблуждение ответ, особенно для тех, кто вообще не разбирается в CSS. Не обращая внимания на тот факт, что CSS определяет логические пиксели, что было ужасной идеей, основанной на несомненно поспешном решении учесть натиск мобильных устройств с поддержкой CSS десять лет назад, пиксели полностью находятся на усмотрении браузеров и пользователей в том, что касается размера шрифта по умолчанию. , по меньшей мере. Вдобавок к этому у нас теперь есть совершенно разные соотношения сторон экрана (и не всегда устройства с a screen) и разрешения в диапазоне от 240p до 2400p. Использование пикселей в CSS без JavaScript почти бесполезно.
@amn хорошо, заметьте, что этому ответу 8 лет. Это ДОЛГОЕ время в Интернете. Тем не менее, пиксели все еще в порядке, если не идеальны. Большинство (все?) Браузеры адекватно регулируют размер шрифта в пикселях на конкретном устройстве. Однако сегодня я обычно использую rem в качестве единицы измерения.
Может быть, мне чего-то не хватает, но какая польза от длины в пикселях? Почему они «прекрасные» или «идеальные»? Например, по сравнению с em. Кроме того, я думаю, что ответы на SO должны стремиться быть вневременными - в конце концов, это база знаний. Википедия программирования :) Поскольку Википедия обновляется, чтобы отражать факты, по моему скромному мнению, SO должен отвечать.
@amn Я не сказал, что они идеальны или приносят какую-то серьезную пользу. Я как раз отвечал на вопрос ОП. Что касается стремления быть вневременным, то, если вы можете предсказать будущее Интернета через 8 лет, больше возможностей для вас! Но у меня нет времени постоянно обновлять здесь свои ответы за десятилетие. Надеюсь, люди знают достаточно, чтобы посмотреть на отметки времени в ответах и принять это во внимание.
Что касается разницы между модулями css % и em.
Насколько я понимаю (по крайней мере, теоретически / концептуально, но, возможно, не то, как эти два модуля могут быть реализованы в браузерах), эти два модуля эквивалентны, т.е. если вы умножите значение em на 100, а затем замените em на %, это должно быть то же самое ?
Если между em и% действительно есть какая-то реальная разница, может ли кто-нибудь объяснить это (или дать ссылку на объяснение)?
(Я хотел добавить этот свой комментарий туда, где он должен быть, то есть с отступом чуть ниже ответа "Liam, answered Sep 25 '08 at 11:21", так как я также хочу знать, почему его ответ был отклонен, но я не мог понять, как разместить свой комментарий там, и поэтому должен был напишите этот ответ "глобального потока")
Реальная разница становится очевидной, когда вы используете его не для размеров шрифта. Установка padding для 1em отличается от 100%. em всегда относительно размера шрифта. Но % может относиться к размеру шрифта, ширине, высоте и, возможно, к некоторым другим вещам, о которых я не знаю.
На мой взгляд, в 2016 году нет разницы между em и%. Если я ввожу 1,2 em, все современные браузеры думают, что я использовал 120%, и, например, если я использую 0,7 em, все современные браузеры думают, что я использовал 70% ... Это то, что я испытал в CSS.