При создании страницы HTML следует указать такие элементы, как margin с пикселями или с точками в CSS?
Является ли одна из них лучшей практикой, чем другая? Любые преимущества или недостатки для одного?
Пиксели против очков в HTML/CSS
Ответ 1
Использовать px или em
Точки (pt): Точки традиционно используются в печатных носителях (все, что должно быть напечатано на бумаге и т.д.). Одна точка равна 1/72 дюйма. Точки очень похожи на пиксели, поскольку они фиксированные и не могут масштабироваться.
Как правило, 1em = 12pt = 16px = 100%.
[Вывод]
Победитель:% (%).
- Заметка JohnB: это для ТЕКСТА. Очевидно, вы спрашивали о "вещах, таких как поля". (Я предполагаю, что вы имеете в виду и
padding). Для этого я бы рекомендовалpxилиem. Лично я переключаюсь в зависимости от конкретной ситуации.
ДОПОЛНИТЕЛЬНЫЕ СТАТЬИ
Точечные значения предназначены только для печати CSS!
(Комментарий ниже)
Точки для печати? Нет.
Баллы не предназначены исключительно для печати. Теоретически точки предназначены для определения абсолютной меры. Пиксели не являются абсолютными, поскольку в зависимости от вашего экрана и выбранного определения (не разрешения) разрешение (пикселей на дюйм) может идти от партии (150 точек на дюйм) или очень мало (75 точек на дюйм). Это означает, что ваши пиксели могут быть размером или, возможно, половиной этого размера. Это означает, что текст, который вы создаете, идеально читаемый на экране, может выглядеть слишком большим на экране ваших клиентов ( "пожалуйста, сделайте текст меньше, хорошо?" ) Или слишком мал, чтобы читать на экране соседей ( "эй, на вашем веб-сайте сказал мне о том, что на днях ты сказал, что работал... ну, я не мог прочитать текст очень хорошо, его так мало" ).
Баллы - это решение этой проблемы. Но браузеры и операционные системы должны управлять ими. В основном это означает:
браузеру приходится вычислять размер дисплея в пикселях с использованием заданного значения (скажем, 10pt) и реального разрешения экрана; операционные системы должны сообщать реальное текущее разрешение, а не значение по умолчанию.
также:
Ответ 2
Правила большого пальца:
Пиксели для отображения экрана; точек для печати.
'em' или '%' (и менее известный rem) лучше подходят для более гибкого макета.
em - единица измерения, основанная на размере буквы "m" в текущем шрифте. Задание размеров в em позволяет иметь размер, основанный на размере шрифта, что означает, что вы можете изменить шрифт, и макет изменится, чтобы следовать его примеру.
Но есть много раз, когда вам нужно использовать фиксированный размер. В этом случае px обычно будет лучшим, так как большинство веб-страниц отображаются на экране на основе пикселей. Но если вы планируете напечатать многостраничную страницу, тогда у вас может быть таблица стилей, ориентированная на печать, с макетом, основанным на точках.
Обычно я рекомендую em над px или pt. Если вы используете px, это связано с тем, что на вашей странице есть элементы, размер которых в пикселях, таких как изображения, для которых вам нужна остальная часть макета. В этом случае, поскольку изображения находятся в пикселях, так же как и таблицы стилей. Кроме того, поскольку точки являются единицей печати, нет гарантии, что они будут отображаться на экране: px на основе экрана, поэтому вы получите гораздо более последовательный вид на экране кросс-браузера и кросс-платформенного.
Кстати, эта страница может дать вам дополнительную информацию: http://webdesign.about.com/cs/typemeasurements/a/aa042803a.htm
Ответ 3
Очки отличные, так как они имеют высоту 1/72 дюйма. Вы знаете, насколько высок ваш текст. Проблема с пикселями заключается в том, что они становятся меньше, чем выше разрешение. Пиксели великолепны, если вы хотите обернуть текст вокруг фонового изображения. Выполняет некоторые работы, но может сделать приятную страницу. Я слышал, что пиксели не изменяются в IE, поэтому, если они хотят увеличить размер шрифта, они не могут. Не используйте IE, поэтому я не могу сказать. Помните это. EM оставляет вас во власти того, как у человека есть определенные размеры шрифтов в браузере. Эмс и проценты облегчают работу. Я всегда использую очки.
[...]
Нет, точки не самые лучшие. Любой, кто найдет эту тему, забыл, что вы когда-либо читали это. Это форум веб-дизайна. Для отображения страниц на экранном носителе. Точки включены в CSS исключительно для целей печати. Для таблиц стилей печати. Они не масштабируются, так как% и ems. Если вы являетесь каким-либо веб-дизайнером, вы должны работать над тем, чтобы сделать ваши страницы доступными, а использование очков - это забастовка против этого сразу.
http://www.v7n.com/forums/coding-forum/17594-font-size-pixel-vs-point.html
Смешно, все отвечают "пиксель или%/em", а не "пиксель или точки".
Я не знал, что есть разница между ними.
Изменить: еще больше информации... официальные!
Не указывайте размер шрифта в pt или другие единицы абсолютной длины для таблиц стилей экрана. Они несовместимы между платформами и не могут быть изменены пользователем User Agent (например, браузером). Сохранять использование таких устройств для стилизации на носителях с фиксированными и известными физическими свойствами (например, печать).
Ответ 4
Любой, кто говорит вам использовать пиксели, неверно. Пиксели отлично работают, но их просто не требуется... Всегда! Точки - прекрасный способ указать абсолютную меру, а для масштаба, который мы обычно работаем в Интернете, они чаще всего не являются предпочтительной мерой.
Помимо точек, есть также пика, дюйм, сантиметр и так далее. Выбор одного из них над другим очень похож на высказывание: "Я должен измерить эту комнату в футах или дюймах?" Пусть здравый смысл будет вашим проводником. Они все сделают работу.
Em, который придумал некоторые ответы, должен быть зарезервирован для того, когда это уместно. То есть, "когда эта вещь масштабируется, я хочу, чтобы эта другая вещь масштабировалась". Для чего нужны относительные меры. Я знаю, что это зависит от вашего первоначального вопроса, но мне пришлось обратиться к некоторым бессмысленным словам о том, что "всегда использую em".
BTW, пиксели не равны физическим пикселям. Сегодня px в таблице стилей означает 1/96 дюйма. Вот почему я говорю, что не использую их. Большинство людей этого не знают. Они используют их, думая, что они определяют фактические пиксели. Я не могу серьезно относиться к этим людям с этим явлением (хотя я не виню людей, я обвиняю запутанную природу состояния вещей, поэтому я стараюсь, чтобы пиксели исчезли.). Кроме того, если пиксели действительно означали пиксели, это был бы ужасный способ указать размеры. Поговорите о том, что вещи будут случайным образом сокращаться и расти на основе неконтролируемых произвольных разрешений экрана. Хлоп! Держитесь подальше от пикселей!!! На практике они работают, но только из-за того, что они скрывают невидимые усилия со стороны разработчиков браузеров и пользователей ОС, в теории они представляют собой ужасно двусмысленный способ определения ваших намерений.
Ответ 5
Ответ John B выше - лучший и самый точный. Я просто хотел указать на возможную путаницу, созданную ответом над ним. "Em" в типографии - это ширина буквы "m" в выбранном вами шрифте. Чтобы указать высоту шрифта, принтеры/наборщики использовали "высоту x", которая представляет собой высоту нижнего регистра x для шрифта.
Как указывает Джон, pt - фиксированная единица измерения, равная 1/72 дюйма дюйма. Поскольку мониторы имеют разную плотность пикселей (72/дюйм, 96/дюйм...), это обычно не является хорошим способом для определения размеров в документах HTML.
Эм относится непосредственно к старой типографской единице и делает отличную относительную меру. Когда размер экрана масштабируется, размер шрифта масштабируется. Если вы используете em для полей, они масштабируются относительно ваших размеров шрифта, что обычно хорошо.
Но для полей, отступов и всего, что не связано напрямую с шрифтом, лучше всего использовать rem или "relative ems". Лучший способ сделать это - сначала объявить размер шрифта по умолчанию для вашего тела или тега html. Что-то вроде body font-size = 16px - это хорошее место для начала. Тогда всюду в документе используйте em для текста и rem для всего остального. Или, используйте проценты. Либо все будет хорошо. Как и em и rem, ваш% относится к этому оригинальному размеру шрифта 16px = 100%.
Все в документе будет масштабироваться относительно вашей начальной настройки для вашего 100% -ного размера шрифта в 16 пикселей. Таким образом, вы используете только измерение пикселей один раз в документе. Это пригодится, если позже вы захотите настроить медиа-запросы, чтобы настроить размеры и поля для размещения различных плотностей пикселей на разных дисплеях устройств. Вам нужно только иметь запросы для этого одного первоначального объявления в теге body. Все остальное будет регулироваться относительно этого и не нужно будет изменять.
просто мысль, maxw3st
Ответ 6
Пиксели для меня более эстетичны, и я считаю, что это считается лучшей практикой...
Ответ 7
Я думаю, это зависит от того, что вы пытаетесь сделать.
Я считаю, что ключевой вопрос заключается в том, нужно ли изменять расстояние с помощью окна? Некоторые единицы относительны, некоторые (например, пиксели и точки) не являются - краткое описание здесь.
Я не видел много использованных точек, px кажется более распространенным, когда требуется абсолютное измерение.
Ответ 8
Ответ: Это зависит. Для чего вы используете свою маржу? Являются ли они неотъемлемой частью сбалансированного, изменяемого размера макета, или они просто обеспечивают желоб вокруг краев? Проценты работают лучше в первом случае, а пиксели хорошо работают во втором.
Вы должны попробовать различные возможности и определить, какие из них лучше всего подходят для вашего документа. Поскольку в этом случае нет "правильного и неправильного", вы можете выбрать ответ, который лучше всего подходит вам.
Ответ 9
Я использую пиксели почти для всех.
Для меня это "чувствует", как будто у меня более точный контроль.
Для нескольких вещей, которые мне нужны для динамического изменения размера окна, я использую проценты.
EDIT: