Правильное использование единиц измерения?

Question

Я использовал px почти для всех стилей, связанных с измерениями, но я хотел знать лучшие места для использования пикселей (px), процентов (%), точек (pt) ) и em.
Я видел использование em и (я полагаю) points в типографии, но я не знаю, как лучше их использовать.

Где либо использовать, и почему?

Answer 1

• pt или cm, in, mm и т. Д. Чаще всего используются для таблиц стилей печати, поскольку они наиболее подходят для измерений физических свойств листов бумаги и визуализации принтеры.

• em и en ( и новые rem, а также более интересные единицы, такие как ch) являются относительными единицами глифа и, как таковые, подходят для стилизации текста в соответствии с абсолютными единицами в корневом элементе (например, px единиц в body). еще одно интересное использование: ex единиц (высота глифа 'x' в шрифте) для установки вертикальных мер по отношению к тексту, ch для отступа строк.

• px абсолютно отображаются, поэтому можно создать макет с идеальным (или фиксированным) пикселем, основанный на этих единицах, примененных для контейнеров или на различных виджетах, требующих фиксированного размера (кнопки и тому подобное). отказ от ответственности: абсолютно преувеличение, поскольку пиксели редко бывают абсолютными и имеют много факторов, влияющих на визуализированный результат - см. эту статью о пикселе как угловом показателе .

• % в основном используются в сочетании с абсолютной единицей в верхнем контейнере и применяются в различных методах CSS, таких как контейнер с центрированием. Эти устройства также очень удобны для макетов, которые являются текучими по своей природе. другие, такие как относительное окно просмотра vh, vw и vmin, могут использоваться независимо от единиц измерения родителя .

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

Answer 2

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

В наши дни браузеры соответствуют веб-реальности: большинство людей используют px везде, практически для всего.Таким образом, px теперь определяется как угловое измерение , что, по сути, означает, что px ведет себя очень хорошо при любом масштабе и на любом устройстве размера или DPI.

Аналогично, как частьв соответствии с веб-реальностью, все остальные единицы определены в терминах px, так что на самом деле нет причин использовать их, если это не окажется более удобным для вашего случая.Единственное исключение - это, конечно, проценты, поскольку они позволяют указывать значения по отношению к измерениям родителей.

Подробности из спецификации :

• in, cm, mm, pt и pc все определены относительно px, поскольку на практике все устройства следуют "Для устройства CSS,эти размеры ... привязаны ... (ii) путем соотнесения единицы пикселя с опорным пикселем. " И, как обсуждалось," опорный пиксель "- это угловое измерение, которое изменяется в зависимости от настроек DPI, размера экрана,уровень масштабирования, тип устройства и т. д.
• 1em равно вычисленному font-size элемента , которое обычно определяется в px.Если сам этот размер определен в em с или ex с, браузер затем смотрит вверх, пока не найдет px относительно, в конечном итоге возвращаясь к значению по умолчанию font-size (обычно 12px).
• 1ex равно высоте буквы "x" в определенном font-size, если это возможно, но обычно (?) Возвращается к 0.5em.

Answer 3

Раскрытие информации: я являюсь системным администратором, а не веб-дизайнером.

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

Я иногда использую % для обработки макетов жидкость / жидкость, хотя чаще всего макет жидкости будет составлять только 100% от браузера, но со столбцами фиксированной ширины (px).

Я использую px для обработки ширины столбцов, заголовков и т. Д. Атрибуты height и width тега <img>, конечно, по умолчанию в пикселях, и изображение будет отображаться лучше, если вы не спроситебраузер, чтобы изменить его размер от его исходного / оригинального разрешения.В некоторых случаях вам нужно использовать px для шрифтов, когда шрифт должен работать с изображением (т.е. значок гаечного ключа рядом со словом «Инструменты»).Если возможно, я всегда использую шрифты UTF-8 вместо изображений.

Answer 4

Используйте px для элементов заданного размера.Используйте процент, когда необходимо, чтобы элемент был пропорционален размеру окна или размеру родительского элемента.

em - это стандарт для текста, он корректируется в соответствии с размером экрана на компьютере Mac.Сделайте это привычкой, есть много хороших блогов о том, почему использовать em, em не только для свойств шрифта, но и для других элементов, таких как div, input и т. Д. Могут быть последствия при использовании px для размера шрифта, есть такжеВ ситуациях, когда px и% будут более идеальными, для полного понимания требуются метод проб и ошибок.

Нет никакого реального правила использования всего этого в соответствии с желаемым эффектом.По мере создания вы будете тестировать свой сайт в разных разрешениях и корректировать размер браузера, чтобы увидеть, как он выглядит с разных точек зрения пользователей.

Рассмотреть возможность совместимости и разрешения кроссбраузерно с em, Учитывать разрешение с процентами,