Продолжаются ли споры о em VS px VS% в типографии?

8

Я читал несколько статей о том, почему em лучше, чем px в типографии. И база должна быть в%, лучше всего даже иметь body{ font-size:62.5%; }.

Одна из лучших статей, которые я смог найти, находится здесь: http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/

В основном это говорит о том, что px плохо масштабируется на сайтах и ​​устройствах. Я всегда делал типографику в px и никогда не встречал проблем. Я также работал с некоторыми CSS-фреймворками и некоторыми темами WordPress, и я всегда вижу, что используется только обычный px.

Теперь я вижу, что большинство статей написаны в основном из тех, что были несколько лет назад, я хотел знать, правда ли, что px плохо масштабируется, или это уже не точка для современных браузеров и устройств ,

На заметку. Я даже читал и видел на некоторых сайтах, что люди даже заходят так далеко, чтобы делать все свои стили в их. Например, отступы и поля сделаны в em.

Это необходимо, если вы хотите иметь хороший масштабируемый сайт.

website-design typography Саиф Бечан
источник
2
Чтобы сделать вещи еще более запутанными, большинство современных браузеров поддерживают относительные ems или rems snook.ca/archives/html_and_css/font-size-with-rem .
paulmorriss
Более свежий и лучший ответ по StackOverflow: stackoverflow.com/questions/11799236/…
Дени де Бернарди

Ответы:

3

Мой ответ, для самого текста это определенное «нет». Хорошие браузеры обманывают (как они должны), когда дело доходит до масштабирования шрифтов, указанных в пиксельных единицах. Веб-разработчик должен быть независим от любых различий в устройствах, на которых отображается контент.

Попробуйте это в редакторе Tryit w3Schools :

<html>
<body>
<p style="font-size:1em">This is a paragraph.</p>
<p style="font-size:12pt">This is a paragraph.</p>
<p style="font-size:16px">This is a paragraph.</p>
<p style="font-size:100%">This is a paragraph.</p>
</body>
</html>

Затем удерживайте клавишу Ctrl и прокрутите колесико мыши или нажмите Ctrl-Numeric +. Все они должны масштабироваться равномерно в хорошем браузере.

Не гарантируется, что пиксели имеют одинаковую ширину и высоту, поэтому разрешение всегда равно 96DPI, и пользовательские настройки могут применяться для увеличения или уменьшения всего содержимого. Учитывая это, большинство браузеров учитывают эти различия в разрешении и масштабируют вывод в соответствии с конкретными аппаратными средствами / предпочтениями. Если браузер будет строго применять фактические пиксельные единицы, браузер (или аппаратное устройство, на котором он работает) будет обречен для конечного пользователя восприниматься как сбой.

Тем не менее, имейте в виду, что HTML оптимизирован не для масштабирования, а для перетекания текста в самый широкий диапазон возможных форматов разрешения (ширина делится на высоту). Браузеры различаются по отступам и полям масштабирования, если они указаны в разных единицах. Для действительно масштабируемых проектов (например, когда положение на фоне имеет значение) следует рассмотреть возможность использования масштабируемого, не плавного формата, такого как SVG . Делать отступы и поля в процентах всегда рискованно!

Если вы используете фоновое изображение или что-то подобное, и вы хотите, чтобы отступы или отступы составляли определенное количество пикселей внутрь, я советую обязательно указывать эти поля и отступы в пиксельных единицах!

Луи Сомерс
источник
1
Просто отметим, что функция «Размер текста» в IE не будет масштабировать шрифты, которые явно исправлены с помощью ptили px.
Жаф - Бен Дугуид