Пиксели против очков в HTML / CSS - PullRequest
49 голосов
/ 17 июня 2011

При создании страницы HTML, следует ли мне указывать такие вещи, как margin s с пикселями или с точками в CSS?

Считается ли одна из них более эффективной практикой, чем другая?Какие-либо преимущества или недостатки одного из них?

Ответы [ 9 ]

34 голосов
/ 17 июня 2011

Используйте px или em

Точки (pt): Точки традиционно используются в печатных СМИ (все, что должно быть напечатано на бумаге и т. Д.). Одна точка равна 1/72 дюйма. Точки очень похожи на пиксели в том смысле, что они представляют собой единицы фиксированного размера и не могут масштабироваться по размеру.

Обычно 1em = 12pt = 16px = 100%.

* * Тысяча двадцать-одина [Вывод]

Победитель: процентов (%).

  • Примечание JohnB: это для ТЕКСТ. Очевидно, вы спрашивали о «таких вещах, как поля». (Полагаю, вы также имеете в виду padding.) Для этого я бы порекомендовал px или em. Лично я переключаюсь, в зависимости от конкретной ситуации.

БОЛЬШЕ СТАТЬЕЙ

Значения точек только для печати CSS!

(Комментарий далее)

Очки для печати? Нет.

Очки не предназначены исключительно для печати. Теоретически, точки предназначены для определения абсолютной меры. Пиксели не являются абсолютными, поскольку в зависимости от вашего экрана и выбранного разрешения (не разрешения), разрешение (пиксели на дюйм) может быть много (150 точек на дюйм) или очень мало (75 точек на дюйм). Это означает, что ваши пиксели могут быть размером, или, возможно, вдвое меньше. Это означает, что текст, который вы разрабатываете, чтобы его можно было легко прочитать на экране, может выглядеть слишком большим на экране вашего клиента («пожалуйста, сделайте текст меньше, хорошо?») Или слишком маленьким, чтобы его можно было прочитать на экране вашего соседа («эй, веб-сайт, который вы рассказал мне о другом дне - о том, над которым, как ты говорил, ты работал… ну, я не мог прочитать текст очень хорошо, он такой маленький ”).

Баллы являются решением этой проблемы. Но браузеры и операционные системы должны управлять ими. В основном это означает:

браузеры должны рассчитывать размер дисплея в пикселях, используя заданное значение (скажем, 10pt) и реальное разрешение экрана; операционные системы должны сообщать реальное текущее разрешение, а не значение по умолчанию.

Также:

9 голосов
/ 17 июня 2011

Эмпирические правила это:

Пикселей для отображения на экране;баллы за печать.

'em' или '%' (и менее известные rem) лучше для более гибкого макета.

em - это единица измерения, основанная наразмер буквы «м» в текущем шрифте.Задание размеров в em позволяет вам выбирать размер в зависимости от размера шрифта, а это означает, что вы можете изменить шрифт, а компоновка изменится в соответствии с его требованиями.

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

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

Кстати, эта страница может дать вам дополнительную информацию: http://webdesign.about.com/cs/typemeasurements/a/aa042803a.htm

6 голосов
/ 17 июня 2011

Очки великолепны, так как они ростом 1/72 дюйма . Вы знаете, насколько высоким будет ваш текст. Проблема с пикселями в том, что они становятся меньше, чем выше разрешение. Пиксели хороши, если вы хотите обернуть текст вокруг фоновой картинки . Требуется некоторая работа, но она может сделать красивую страницу. Я слышал, что размер пикселей в IE не изменяется, поэтому, если они хотят увеличить размер шрифта, они не могут. Не используйте IE, поэтому я не могу сказать. Не забудьте услышать это. EM оставляют вас в зависимости от того, как человек определил размеры шрифта в своем браузере. Эмс и проценты делают это легко. Я всегда использую очки.

[...]

Нет, очки не самые лучшие . Всем, кто найдет эту ветку, забудьте, что вы когда-либо читали это Это форум веб-дизайна. Для отображения страниц на экране мультимедиа. Очки включены в CSS исключительно с целью полиграфического дизайна. Для таблиц стилей для печатных СМИ. Они не масштабируются как%, а ems равны . Если вы веб-дизайнер, вы должны работать над тем, чтобы сделать свои страницы доступными, и использование точек - это удар по вершине.

http://www.v7n.com/forums/coding-forum/17594-font-size-pixel-vs-point.html

Забавно, все отвечают «пиксель или% / em», а не «пиксель или точки».

Я не знал, что между ними есть разница.

подробнее

Редактировать: еще больше информации ... официальные!

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

2 голосов
/ 29 сентября 2012

Ответ Джона Б. выше - самый лучший и самый точный. Я просто хотел указать на возможную путаницу, созданную ответом выше его. «Эм» в типографии - это ширина буквы «м» в выбранном вами шрифте. Чтобы задать высоту для шрифта, принтеры / наборщики использовали «высоту х», которая является высотой строчной буквы х для шрифта.

Как указывает Джон, pt - это фиксированная единица измерения, равная 1/72 дюйма. Поскольку мониторы имеют разную плотность пикселей (72 / дюйм, 96 / дюйм ...), обычно это не очень хороший способ для измерения размеров в документах HTML.

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

Но для полей, отступов и всех вещей, не связанных непосредственно со шрифтом, лучше использовать rem или «относительные ems». Лучший способ сделать это - объявить размер шрифта по умолчанию для вашего тела или HTML-тега изначально. Хорошее место для начала - что-то вроде body font-size = 16px. Затем везде в документе используйте em для текста, а rem для всего остального. Или используйте проценты. Либо будет работать нормально. Как и у em, так и у rem, ваш% соответствует первоначальному размеру шрифта 16px = 100%.

Все в документе будет масштабироваться относительно вашей первоначальной настройки для 100% размера шрифта в 16 пикселей. Таким образом, вы используете измерение пикселей только один раз в документе. Это удобно, если вы позже захотите настроить медиазапросы для настройки ваших размеров и полей, чтобы приспособить различные плотности пикселей на разных дисплеях устройства. Вам нужно только иметь запросы для этого одного начального объявления в теге body. Все остальное будет корректироваться относительно этого и не нуждается в изменении.

просто мысль, maxw3st

2 голосов
/ 09 октября 2011

Любой, кто говорит вам использовать пиксели, неправильно .Пиксели работают нормально, но они просто не нужны ... Всегда!Точки - это прекрасный способ указать абсолютную меру, и для шкалы, над которой мы обычно работаем в сети, они чаще, чем не предпочтительная мера.

Кроме точек, есть также пик, дюйм,сантиметр и пр.Выбор одного из этих вариантов похож на высказывание: «Должен ли я измерить эту комнату в футах или дюймах?»Пусть здравый смысл будет вашим проводником.Они все выполнят свою работу.

Эм, о котором говорилось в некоторых ответах, должен быть зарезервирован, когда это уместно.То есть, «когда эта вещь масштабируется, я хочу, чтобы эта другая вещь масштабировалась».Это то, что относительные меры для.Я знаю, что это выходит за рамки вашего первоначального вопроса, но мне пришлось обратиться к чепухе о «всегда использовать их».

Кстати, пиксели не равны физическим пикселям.Сегодня px в таблице стилей означает 1/96 дюйма.Вот почему я говорю, не используйте их.Большинство людей этого не знают.Они используют их, думая, что они указывают фактические пиксели.Я не могу воспринимать этих людей всерьез, поскольку это очевидно (хотя я не виню людей, я виню запутывающую природу положения вещей, именно поэтому я веду кампанию за исчезновение пикселей).Кроме того, если бы пиксели действительно означали пиксели, это был бы ужасный способ указать размеры.Поговорим о том, что вещи будут случайным образом уменьшаться и расти в зависимости от неконтролируемых разрешений экрана.Хлоп!Держитесь подальше от пикселей !!!На практике они работают, но только благодаря ненадлежащим усилиям со стороны производителей браузеров и разработчиков ОС, теоретически они представляют собой крайне неоднозначный способ определения ваших намерений.

1 голос
/ 17 июня 2011

Я думаю, это зависит от того, что вы пытаетесь сделать.

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

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

1 голос
/ 17 июня 2011

Пиксели для меня более эстетичны, и я считаю, что это считается лучшей практикой ...

0 голосов
/ 17 июня 2011

Я использую пиксели почти для всего.

Мне кажется, что у меня есть более точное управление.

Для тех немногих вещей, которые мне нужно динамически изменить с помощью окна,Я использую проценты.

РЕДАКТИРОВАТЬ:

Что такое "em"?

0 голосов
/ 17 июня 2011

Ответ: это зависит.Для чего вы используете свои поля?Являются ли они неотъемлемой частью сбалансированного, изменяемого размера макета или они просто обеспечивают желоб по краям?Проценты работают лучше в первом случае, а пиксели хорошо работают во втором.

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

...