Я использовал px почти для всех стилей, связанных с измерениями, но мне хотелось узнать, где лучше всего использовать пиксели (px), проценты (%), точки (pt) и em.
Я видел использование em и (я думаю) points в типографике, но я не знаю, как их лучше всего использовать.
Где их следует использовать и почему?
pt или cm, in, mm и т. д. чаще всего используются для таблиц стилей печати, поскольку они больше всего подходят для измерения физических свойств листов бумаги и визуализации принтеров.
em и en (и новый rem, а также более интересные единицы, такие как ch) являются относительными единицами глифа и, как таковые, подходят для оформления текста в соответствии с абсолютными единицами в корневом элементе (например, px единиц в body). еще одно интересное использование: ex единиц (высота глифа "x" в шрифте) для установки вертикальных мер по отношению к тексту, ch для отступа строк.
px полностью визуализируются, поэтому можно спроектировать макет с точностью до пикселя (или фиксированный) на основе этих единиц, применяемых для контейнеров, или различных виджетов, требующих фиксированного размера (кнопки и тому подобное). Отказ от ответственности: абсолютно — это преувеличение, поскольку пиксели редко бывают абсолютными и на результат визуализации влияет множество факторов. См. эта статья о px как угловой мере.
% в основном используются в сочетании с абсолютной единицей в верхнем контейнере и применяются в различных техниках CSS, таких как контейнер с искусственным центрированием. эти единицы также очень удобны для макетов, которые изменчивы по своей природе. другие, такие как относительное окно просмотра vh, vw и vmin, могут использоваться независимо от родительских единиц.
все вышеизложенное основано на моем личном мнении, так как эта тема открыта для обсуждения, и методы CSS будут развиваться, и мы увидим больше применений спецификаций и возможностей, о которых мы никогда не думали. в основном это творческое использование этих инструментов, которое ограничивает или отдает предпочтение использованию одной единицы по сравнению с другой.
px на самом деле имеет мало отношения к пикселям на экране, например, из-за масштабирование, дисплеи с высоким разрешением, мобильные устройства и т. д. Вместо этого он определяется как угловая единица: inamidst.com/stuff /notes/csspx
- person Domenic; 24.03.2012
Раньше эти различия имели значение: например, во времена 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.em только для типографики?
- person DriftingSteps; 24.03.2012
px под всем этим; что-то вроде 1em = 12px.
- person Domenic; 25.03.2012
Используйте px для элементов заданного размера. Используйте проценты, если вам нужно, чтобы элемент был пропорционален размеру окна или размеру родительского элемента.
em — это стандарт для текста, он настраивается в соответствии с размером экрана на Mac. Сделайте это привычкой, есть много хороших блогов о том, почему использовать em, em не только для свойств шрифта, он также пригодится с другими элементами, такими как div, inputs и т. д. Могут быть последствия при использовании px для размера шрифта, есть также ситуации, когда px и % будут более идеальными, для полного понимания требуются пробы и ошибки.
Нет никаких правил, что использовать, все зависит от желаемого эффекта. По мере создания вы будете тестировать свой сайт в разных разрешениях и настраивать размер браузера, чтобы увидеть, как он выглядит с разных точек зрения пользователей.
Учитывайте кроссбраузерную совместимость и разрешение с em, Учитывайте разрешение с процентами,
Раскрытие информации: я системный администратор, а не веб-дизайнер.
Обычно я использую em для отступов вокруг изображений, чтобы размеры отступов соответствовали тексту, который он удерживает от изображения.
Я иногда использую % для обработки гибких/гибких макетов, хотя чаще всего гибкая компоновка будет просто 100% браузера, но с фиксированной шириной (px) столбцов.
Я использую px для обработки ширины столбцов, заголовков и т. д. Атрибуты height и width тега <img>, конечно, по умолчанию в пикселях, и изображение будет отображаться лучше, если вы не попросите браузер изменить его размер по сравнению с исходным/ оригинальное разрешение. В некоторых случаях вам нужно использовать px для шрифтов, когда шрифт должен работать с изображением (например, значок гаечного ключа рядом со словом «Инструменты»). Если возможно, я всегда использую шрифты UTF-8 вместо изображений.
