Я чув, що ви повинні визначати розміри та відстані у вашому таблицю стилів з em, а не в пікселях. Тож питання полягає в тому, чому я повинен використовувати em замість px при визначенні стилів у css? Чи є хороший приклад, який це ілюструє?

Неправильно сказати, що один - кращий вибір, ніж інший (або обом не було б задано власну мету в специфікації). Можливо, варто також зазначити, що StackOverflow широко використовує одиниці px. Це не поганий вибір, про який говорили Спойке.

Визначення одиниць

• ПВ є абсолютним одиниця виміру (наприклад , в , пт або см ) , що також відбувається з 1/96 А.Н. в блоці (докладніше про те, чому пізніше). Оскільки це абсолютний показник, він може використовуватися в будь-який час, коли ви хочете визначити що-небудь певного розміру, а не пропорційно чимось іншому, наприклад, розміру вікна браузера або розміру шрифту.

  Як і всі інші абсолютні одиниці, одиниці px не масштабуються відповідно до ширини вікна браузера. Таким чином, якщо весь дизайн сторінки використовує абсолютні одиниці, такі як px, а не % , він не адаптується до ширини браузера. Це не є добре або погано, просто вибір, який дизайнер повинен зробити між дотриманням точного розміру і негнучкістю до розтягування, але в процесі не дотримання точного розміру. Для сайту було б типово поєднувати об'єкти фіксованого розміру та гнучких розмірів.

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

  Всі абсолютні вимірювання жорстко пов'язані один з одним; тобто, 1в це завжди 96 пікселів , так само , як 1in це завжди 72pt . (Зауважте, що 1in майже ніколи не є фізичним дюймом, коли ми говоримо про екранні носії інформації). Всі абсолютні вимірювання припустити номінальне дозвіл екрана 96ppi і номінальне відстань перегляду настільного монітора, і на такому екрані один точки дорівнюватимуть одним фізичним піксель на екрані , і один вбуде дорівнює 96 фізичних пікселів. На екранах, які суттєво відрізняються або по щільності пікселів, або по відстані перегляду, або якщо користувач масштабував сторінку за допомогою функції масштабування браузера, px більше не обов’язково стосуватиметься фізичних пікселів.

• em не є абсолютною одиницею - це одиниця, що відповідає поточному вибраному розміру шрифту. Якщо ви не перекрили стиль шрифту, встановивши розмір шрифту абсолютною одиницею (наприклад, px чи pt ), на це вплине вибір шрифтів у веб-переглядачі користувача чи ОС, якщо вони були створені, тому це не має сенсу. використовувати em як загальну одиницю довжини, за винятком випадків, коли ви спеціально хочете, щоб вони масштабувались як масштаби шрифту.

  Використовуйте em, коли ви конкретно хочете, щоб розмір чогось залежав від поточного розміру шрифту.

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

  Використання % одиниць у дизайні дозволяє дизайну адаптуватися до ширини екрана / пристрою, тоді як використання абсолютної одиниці, наприклад px, не робить.

У мене невеликий ноутбук з високою роздільною здатністю і мені потрібно запустити Firefox у 120% -ному масштабі тексту, щоб можна було читати без примруження.

Багато сайтів мають проблеми з цим. Макет стає все шаленим, текст кнопками розрізається навпіл або повністю зникає. Навіть stackoverflow.com страждає від цього:

Зверніть увагу, як верхні кнопки та вкладки сторінки перекриваються. Якби вони використовували em одиниці замість px, не виникло б проблеми.

Причиною, що я задав це запитання, було те, що я забув, як використовувати ем, оскільки це був деякий час, коли я щасливо зламав CSS. Люди не помітили, що я тримав питання загальним, оскільки я не говорив про розмір шрифтів як такої. Мене більше цікавило, як визначити стилі на будь-якому даному блоковому елементі на сторінці.

Як зазначали Генрік Пол та інші, em пропорційний розміру шрифту, який використовується в елементі. Загальна практика визначає розміри на блокових елементах у px, проте розмір шрифтів у браузерах зазвичай порушує цю конструкцію. Змінення розміру шрифтів зазвичай виконується за допомогою клавіш швидкого доступу Ctrl+ +або Ctrl+ -. Тож гарною практикою є використання замість них.

Використовуючи px для визначення ширини

Ось ілюструючий приклад. Скажімо, у нас є div-тег, який ми хочемо перетворити на стильне поле дати, у нас може бути HTML-код, який виглядає приблизно так:

<div class="date-box">
    <p class="month">July</p>
    <p class="day">4</p>
</div>

Проста реалізація дозволила б визначити ширину date-boxкласу в px:

* { margin: 0; padding: 0; }

p.month { font-size: 10pt; }

p.day { font-size: 24pt; font-weight: bold; }

div.date-box {
    background-color: #DD2222;
    font-family: Arial, sans-serif;
    color: white;
    width: 50px;
}

Проблема

Однак, якщо ми хочемо розмістити текст у нашому браузері, дизайн порушиться. Текст також кровоточить поза коробкою, що майже те саме, що відбувається з дизайном SO, як вказує flodin . Це відбувається тому, що ящик залишатиметься такого ж розміру в ширину, на який він заблокований 50px.

Використовуючи замість них

Розумніший спосіб - замість цього визначити ширину в ems:

div.date-box {
    background-color: #DD2222;
    font-family: Arial, sans-serif;
    color: white;
    width: 2.5em;
}

* { margin: 0; padding: 0; font-size: 10pt; }

// Initial width of date-box = 10 pt x 2.5 em = 25 pt
// Will also work if you used px instead of pt

Таким чином у вас є дизайн рідини на вікні дати, тобто розмір поля разом з текстом пропорційно розміру шрифту, визначеному для вікна дати. У цьому прикладі розмір шрифту визначається *як 10pt і розмір шрифту перевищує 2,5 рази. Отже, коли ви розміряєте шрифти у веб-переглядачі, це поле буде в 2,5 рази перевищувати розмір шрифту.

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

Екран комп'ютера, як правило, НЕ 96dpi! (Або ppi, якщо ви хочете бути педантичним.)

Піксель НЕ має фіксованого фізичного розміру.
(Так, він фіксується лише в одному екрані, але на наступному екрані піксель, швидше за все, більший або менший, і, звичайно, НЕ 1/96 дюйма.)


Доказ
Накресліть лінію довжиною 960 пікселів. Виміряйте це фізичною лінійкою. Це 10 дюймів? Ні..?
Підключіть ноутбук до телевізора. Зараз лінія 10 дюймів? Ще ні?
Покажіть лінію на своєму iPhone. Ще однаковий розмір? Чому ні?

Хто чорт винайшов міф 96dpi екрану комп'ютера?
(Деякі релігії оперують міфом із 72 точок на дюйм. Але однаково неправильно.)

Це корисно для всього, що має масштабуватися відповідно до розміру шрифту.

Це особливо корисно для браузерів, які реалізують масштабування, зменшуючи розмір шрифту. Тож якщо ви розмірите всі елементи, використовуючи emїх масштаб відповідно.

Тому що em ( http://en.wikipedia.org/wiki/Em_(typography) ) прямо пропорційний розміру шрифту, який зараз використовується. Якщо розмір шрифту становить, скажімо, 16 балів, один ем - 16 балів. Якщо розмір вашого шрифту становить 16 пікселів ( зверніть увагу : не такий, як точки), один em - 16 пікселів.

Це призводить до двох (пов'язаних) речей:

1. легко зберегти пропорції, якщо згодом ви вирішите редагувати розміри шрифту у своєму CSS.
2. Багато браузерів підтримують власні розміри шрифтів, змінюючи ваш CSS. Якщо все розробити в пікселях, у цих випадках ваш макет може зламатися. Але, якщо ви використовуєте ems, ці зміни можуть пом'якшити ці проблеми.

приклад:

Код: body {font-size: 10px;} // тримайте на 10 всі розміри нижче правильних, змініть це значення, а решта змінить, наприклад, 1,4 цього значення

1 {font-size: 1.2em;} // 12px

2 {font-size: 1.4em;} // 14px

3 {font-size: 1.6em;} // 16 пікселів

4 {font-size: 1.8em;} // 18 пікселів

5 {font-size: 2em;} // 20px

…

тіло

1

2

3

4

5

змінюючи значення в тілі, решта змінюється автоматично, щоб бути в кілька разів базовим значенням ...

10 × 2 = 20 10 × 1,6 = 16 тощо

у вас може бути базове значення як 8 пікселів… тому 8 × 2 = 16 8 × 1,6 = 12,8 // може бути округлений браузером

Дуже практична причина полягає в тому, що IE 6 не дозволяє вам змінити розмір шрифту, якщо він вказаний за допомогою px, тоді як він використовується, якщо ви використовуєте відносну одиницю, наприклад em або відсотки. Не дозволяти користувачеві змінити розмір шрифту - це дуже погано для доступності. Хоча він у занепаді, там все ще багато користувачів IE 6.

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

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

Кілька прикладів та статей таких конструкцій (на вибір є безліч) дивіться останній випуск A List Apart: Fluid Grids , старішу статтю Як розмістити текст у CSS або Bulletproof Web Design Дана Цедерхольма .

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

Наскільки я особисто зневажаю IE6, на даний момент це єдиний браузер, затверджений для більшості користувачів у нашій компанії Fortune 200.

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

body {
  font-size: 62.5%;
}

Тепер вкажіть такі p(та інші) теги, як цей:

p {
  font-size: 0.8em; /* This is equal to 8px */
  font-size: 1.0em; /* This is equal to 10px */
  font-size: 1.2em; /* This is equal to 12px */
  font-size: 2.0em; /* This is equal to 20px */
}

І так далі.

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

Traingamer вже надав необхідні посилання .

Піксель - це абсолютна одиниця, тоді як rem / em відносні одиниці. Докладніше: https://drafts.csswg.org/css-values-3/

Ви повинні використовувати відносну одиницю, коли ви хочете, щоб розмір шрифту був адаптивним відповідно до розміру шрифту системи, оскільки система надає значення розміру шрифту кореневому елементу, що є елементом HTML.

У цьому випадку, коли веб-сторінка відкрита в google chrome, розмір шрифту для елемента HTML встановлюється chrome, спробуйте змінити його, щоб побачити вплив на веб-сторінках із шрифтами одиниць rem / em.

Якщо ви використовуєте pxв якості одиниці для шрифтів, шрифти не змінять розмір, тоді як шрифти з rem/em змінять одиницею змінять розмір при зміні розміру шрифту системи.

Тому використовуйте, pxколи ви хочете, щоб розмір був фіксований, і використовуйте rem/ emколи ви хочете, щоб розмір був адаптивним / динамічним до розміру системи.

Загальний консенсус полягає у використанні відсотків для розміру шрифту, оскільки він більш узгоджується в браузерах / платформах.

Це смішно, хоча я завжди використовував pt для розміру шрифту, і я припускав, що всі сайти використовували це. Зазвичай ти не використовуєш розміри px в інших додатках (наприклад, Word). Я думаю, це тому, що вони для друку - але розмір у веб-браузері такий самий, як у Word ...

Уникайте em або px, використовуйте rem, замість цього легше знайти обчислене значення. Але між em та px, px краще, тому що em важко налагоджувати.