Чи досі є актуальними повідомлення?

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

Наприклад, у Chrome ви можете це зробити, перейшовши settings -> show advanced settings -> web content -> font size: very large. Я можу це зробити, якби я використовував великий монітор високої роздільної здатності, який був далеко.

Я створив планкер, який демонструє різницю між ems та px у розмірі.

#div1 {
  width: 320px
}

#div2 {

  width: 20em;
}

Якщо у своєму браузері я встановив розмір шрифту середнім, ці диви будуть однакового розміру, розмір базового шрифту - 16 пікселів, тобто 20ем = 320 пікселів.

Однак, коли я змінюю розмір шрифту свого браузера на дуже великий, ми можемо побачити, що div, виміряний в ems, збільшився в розмірі.

Однак цей ефект буде відхилений, якщо я, наприклад, визначу розмір шрифту в тезі тіла.

body {
  font-size: 16px;
}

Тому що тепер мій css переосмислює розмір шрифту, встановлений браузером.

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

Озирнувшись в Інтернеті - багато сайтів , зробити набір розмір шрифту в тілі тега.

Наприклад, Переповнення стека, наприклад, встановлює розмір шрифту 13 пікселів у тезі тіла. Налаштування розміру шрифту в моєму браузері не впливає на макет переповнення стека.

Результати пошуку Google не роблять цього.

(обидва ці скріншоти, зроблені з хромованим розміром шрифту, встановлені на дуже великих розмірах, і 100% збільшенням).

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

Однак цей ефект буде відхилений, якщо я, наприклад, визначу розмір шрифту в тезі тіла.

body {
  font-size: 16px;
}

Тому що тепер мій css переосмислює розмір шрифту, встановлений браузером.

Ви забуваєте про доступність .

Див. С14: Використання ем-одиниць для розміру шрифту з Посібників з доступності веб-вмісту (WCAG 2.0).

Встановіть параметр розміру шрифту вашого браузера на Дуже великий . Тепер перейдіть на веб-сайт, такий як W3C . Як виглядає текст?

Ось в чому полягає цей варіант. Розробники StackExchange та багатьох інших веб-сайтів вирішили, що їх вибір важливіший, ніж вибір користувачів, які можуть зірватись із зором. Правильний чи неправильний вибір, виходить за межі цього питання, і відповідь не потрібна прямо.

Однак ви можете бути змушені (в тому числі законодавством для деяких веб-сайтів) приймати різні рішення та дозволяти користувачам вибирати розмір шрифту. Звідси у вас є вибір: або ви вказуєте розмір зображень та різні зони сторінки у пікселях, і в цьому випадку параметр розміру шрифту браузера матиме забавні ефекти на макет, або ви використовуєте emдля цих елементів як добре.

Також зауважте, що якщо ви не визначаєте розмір шрифту в пікселях на рівні тіла, то emскрізь дотримуйтесь розміру шрифту. Наприклад, Google вказав розмір шрифту непослідовно, і їх пошукова сторінка виглядає дивно, особливо із заголовками, меншими за звичайний текст. Вікіпедія, з іншого боку, зробила відмінну роботу, використовуючи emщоразу, коли було вказано розмір шрифту. Нижче наводяться скріншоти обох сайтів, наданих Chromium, з параметром розміру шрифту, встановленим на Дуже великий :

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

Це справжня проблема з двох причин.

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

По-друге, занадто багато веб-сайтів не візуально візують себе навіть при збільшенні. Веб-сайти, що реагують, добре справляються, але невідповідальні будуть демонструвати або горизонтальну прокрутку, або якусь поведінку "ваш екран занадто малий".

Існує також принципова різниця між масштабуванням та масштабом тексту для розробника. Хоча emозначає "підлаштовувати це під налаштування розміру тексту користувача", масштабування стосується масштабування всієї сторінки вгору або вниз, а не лише тексту.

Візьмемо приклад меню сайту (у верхній частині сторінки, при цьому посилання розташовуються в рядку). З масштабуванням ви знаєте, що висота меню буде змінюватися пропорційно до інших елементів. Опція розміру тексту залежить від поведінки. Ви можете припустити, що людина з вадами зору зможе побачити ваше 50px-високе меню у всіх випадках: ніхто не пропустить чорне меню на білому тлі. Або ви можете вирішити, що, наприклад, його висота повинна бути пропорційною тексту 1.5em.

Суть ems полягає у визначенні всіх вимірів на вашій веб-сторінці за розміром базового шрифту

Це може бути нерозуміння термінів з мого боку, але для уточнення: emвідносно розміру шрифту "поточного елемента". remвідносно розміру кореневого шрифту.

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

Тому я не використовую em. Насправді ваш досвід масштабування - це останнє, що мені спадає на думку, коли я використовую відносні одиниці вимірювання. Моя стурбованість двояка.

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

По-друге, я просто хочу висловити розміри шрифту простими термінами, які я можу зрозуміти. Якщо я виражаю свої базові шрифти в pt'' s '', а все інше rem's em' або 's', мені це простіше. Мені не потрібно знати роздільну здатність вашого пристрою, і вам не потрібно збільшувати масштаб. Ваш браузер знає, скільки пікселів використовувати; ніхто з нас не повинен думати про це.