Я использовал px для почти всего стиля, связанного с измерением, но я хотел знать лучшие места для использования пикселей (px), процент (%), точек (pt) и em.
Я видел использование em и (я считаю) points в типографии, но я не знаю, как их использовать.
Где следует использовать и почему?
pt или cm, in, mm и т.д. наиболее используются для таблиц стилей печати, так как они наиболее подходят для измерений физических свойств листов бумаги и рендеринга принтеры.
em и en (и новый rem и более интересные единицы, такие как ch). являются относительными единицами глифа и, как таковые, подходят для стилизации текста в соответствии с абсолютными единицами в корневом элементе (например, px единиц в body).
другое интересное использование: ex единиц (высота символа "x" в шрифте) для установки вертикальных мер по отношению к тексту, ch к отступам.
px абсолютно визуализируются, поэтому можно создать идеальный (или фиксированный) макет на основе этих блоков, применяемый для контейнеров или на разных виджетах, требующих фиксированного размера (кнопки и т.п.). отказ от ответственности: абсолютно является чрезмерным утверждением, поскольку пиксели редко бывают абсолютными и имеют много факторов, влияющих на результат - см. в этой статье о px как мера angular.
% в основном используются в сочетании с абсолютной единицей в верхнем контейнере и применяются в различных методах CSS, таких как контейнер с центрированным faux. эти устройства также очень удобны для макетов, которые по своей природе являются текучими. другие, такие как относительный объект просмотра vh, vw и vmin, могут использоваться независимо от родительских блоков.
все вышеизложенное основано на моих личных взглядах, поскольку этот предмет открыт для обсуждения, а методы CSS будут развиваться, и мы увидим больше использования спецификаций и возможностей, о которых мы никогда не думали. это в основном творческое использование тех инструментов, которые позволяют использовать или использовать одну единицу над другой.
Раньше имело значение эти различия: например, в дни IE6, вы никогда не должны устанавливать свой текст с помощью px, потому что тогда его нельзя было бы увеличить. То есть, в тот же день браузеры фактически обрабатывали px как количество пикселей.
В наши дни браузеры соответствуют веб-реальности: большинство людей используют px везде, почти для всех. Таким образом, px теперь определяется как измерение angular, что по существу означает, что px ведет себя отлично в любой настройке масштабирования и на любом размера или DPI.
Точно так же, как часть соответствия веб-реальности, все остальные единицы определяются в терминах px, поэтому нет смысла использовать их, если это не будет более удобным для вашего случая. Единственное исключение - это, конечно, проценты, поскольку они позволяют вам указывать значения в отношении измерений родителей.
Подробности из спецификации:
in, cm, mm, pt и pc все определены относительно px, поскольку на практике все устройства следуют "Для устройства CSS, эти размеры... привязаны... (ii) путем связывания блока пикселей с опорным пикселем". И, как обсуждалось, "опорный пиксель" представляет собой измерение angular, которое изменяется в зависимости от настроек DPI, размера экрана, уровня масштабирования, типа устройства и т.д.1em равен вычисленному font-size элемента, который обычно определяется в px. Если этот размер определен в em или ex s, браузер затем смотрит вверх, пока не найдет px относительно, в конце концов вернется к умолчанию font-size (обычно 12px).1ex, если возможно, равна высоте буквы "x" в определенном font-size, но обычно (?) возвращается к 0.5em.Используйте px для элементов с заданным размером. Используйте процент, если вам нужно, чтобы элемент был пропорционален размеру окна или размеру родительского элемента.
em - стандарт для текста, он настраивается в соответствии с размером экрана на mac. Сделайте это привычкой, есть много хороших блогов о том, почему использовать em, em не просто для свойств шрифта, он также пригодится другим элементам, таким как div, входы и т.д. Может быть последствия при использовании px для размера шрифта, там также ситуации, в которых px и% будут более идеальными, для полного понимания этого процесса требуется проб и ошибок.
Нет никакого реального правила в том, что использовать все это в соответствии с желаемым эффектом. По мере создания вы проверите свой сайт в разных разрешениях и настройте размер браузера, чтобы увидеть, как он отображается с разных точек зрения пользователей.
Учитывайте совместимость и разрешение браузера с помощью em, Рассмотрим разрешение с процентами,
Раскрытие информации: я системный администратор, а не веб-дизайнер.
Обычно я использую em для заполнения вокруг изображений, чтобы сохранить размер заполнения в соответствии с текстом, который он держит в стороне от изображения.
Я использую % для обработки компоновки жидкости и жидкости иногда, хотя чаще всего жидкостная компоновка будет всего лишь на 100% от браузера, но с фиксированной шириной (px).
Я использую px для обработки ширины столбцов, заголовков и т.д. Атрибуты height и width тега <img>, конечно, в пикселях по умолчанию, и изображение будет отображаться лучше всего, t попросите браузер изменить его исходное/исходное разрешение. В некоторых случаях вам нужно использовать px на шрифтах, когда шрифт должен работать с изображением (т.е. Значок гаечного ключа рядом со словом "Инструменты" ). Если возможно, я всегда использую шрифты UTF-8 вместо изображений.