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

Что вы будете использовать для макета веб-страницы? Процент или пиксели?
Когда один должен использовать один над другим?

web-development design websites

— ACP
источник

Ни один - используйте их ;-)

— Armand

(Это «em» типографский термин, а не «em» тег HTML, если кто-то смущает.)

— Фрэнк Шиарар

@Alison: ты не значит «Ни один - использование эм s»?

— Алан Пирс

Целевая платформа? Очевидным был бы процент, но, к сожалению, поскольку большинство ваших графических ресурсов не будут хорошо масштабироваться, я бы порекомендовал пиксели

— dvhh

Хмммм @Алан, ты можешь быть прав :—)

— Арманд

Ответы:

Какой юнит вы используете, полностью зависит от того, чего вы хотите достичь. Единицы, наиболее часто используемые в веб-макетах:

px - абсолютный; один пиксель
pt - абсолютный; 1/72 дюйма, около 1,3 пикселя для экрана
em - относительно размера родительского шрифта; 1.0em = размер символа (ширина заглавной буквы M)
% - по отношению к родителю

Вы используете px для размеров, которые остаются постоянными, например, граница 1px.
Вы используете em для размеров, которые должны соответствовать размеру шрифта, например, поле 3.0em.
Вы используете% для размеров, которые должны занимать процент от родительского, например, 50% ширины.

Для макетов веб-страниц вы обычно используете либо пиксели, либо проценты, в зависимости от того, хотите ли вы использовать фиксированный (пиксельный) макет или изменяемый (в процентах) макет.

— Guffa
источник

Немного задира: em - это ширина, а не высота заглавной буквы M в традиционной типографии. Не удивительно, что en - это ширина верхнего регистра N. Ex - это основанная на символах мера высоты.

— Стэн Роджерс

@ Стэн Роджерс: Я никогда не говорил, что это высота буквы M в верхнем регистре, кто-то другой редактировал это в.

— Guffa

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

— Стэн Роджерс

Размер точки не является абсолютным, если вы не знаете точное разрешение устройства вывода и масштабный коэффициент, который установил пользователь (независимый от разрешения пользовательский интерфейс, XP «большие шрифты» и т. Д.). Кроме того, iPhone 4 имеет разрешение 326 т / д, что значительно больше

— 72 т / д

@JBRWilkinson: Это абсолютная мера для любого устройства. Это так же абсолютно, как единица px; размер пикселя также отличается для любого данного дисплея.

— Гуффа

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

— sunwukung
источник

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

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

— Мэтт С
источник