Відсоток або піксель для макетів?

Що ви використовуєте для макета веб-сторінки? Відсоток або пікселі?
Коли слід використовувати один над іншим?

web-development design websites

— АКТ
джерело

Ні - використовуйте em 's ;-)

— Арман

(Це "em" типографічний термін, а не "em" тег HTML, якщо хтось хитається.)

— Frank Shearar

@Alison: ти не маєш на увазі "Ні - використовуй em s"?

— Алан Пірс

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

— dhhh

Хмммм @ Алан, ти можеш мати рацію :—)

— Арман

Відповіді:

Яку одиницю ви використовуєте, повністю залежить від того, що ви хочете досягти. Найбільш використовувані одиниці в веб-макетах:

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

Ви використовуєте px для розмірів, які залишаються постійними, наприклад, границя 1px.
Ви використовуєте em для розмірів, які повинні відповідати розміру шрифту, наприклад, розмір 3,0ем.
Ви використовуєте% для розмірів, які повинні займати відсоток від батьківського, наприклад, шириною 50%.

Для макетів веб-сторінок ви зазвичай використовуєте або пікселі, або відсотки, залежно від того, чи потрібно фіксований (піксельний) макет або флюїдний (відсотковий) макет.

— Гуффа
джерело

Трохи для вибору: em - це ширина, а не висота верхнього регістру M у традиційній друкарні. Не дивно, що en - ширина верхнього регістру N. Ex - це міра висоти на основі символів.

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

@ Стан Роджерс: Я ніколи не говорив, що це висота верхнього М, хтось інший редагував це.

— Гуффа

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

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

Розмір точки не є абсолютним, якщо ви не знаєте точну роздільну здатність пристрою виводу та коефіцієнт масштабу, який встановив користувач (незалежний інтерфейс від роздільної здатності, XP "великі шрифти" тощо). Також iPhone 4 має 326 dpi, що значно більше 72dpi

— JBRWilkinson

@JBRWilkinson: Це абсолютна міра для будь-якого пристрою. Це так само абсолютно, як одиниця px; розмір пікселя також відрізняється для будь-якого дисплея.

— Гуффа

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

— sunwukung
джерело

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

Традиційно використання відносних розмірів також дозволяло сторінкам виглядати правильно в різних роздільних здатностях і було особливо вигідно для збільшення масштабу браузера або мінімальних розмірів шрифту. Але сучасні веб-переглядачі тепер дуже добре змінюють розмір за допомогою макетів, характерних для пікселів, навіть збільшуючи зображення за необхідності. Тому стає менш важливим використання відносних розмірів.

— Matt S
джерело