Я хотів би похвалити відповідь josh3736 за надання чудового історичного контексту. Хоча це добре сформульовано, ландшафт CSS змінився за майже п’ять років відтоді, як це питання було задано. Коли це питання було задано,px ні правильну відповідь, але це вже не вірно сьогодні.
tl; dr: використанняrem
Огляд блоку
Історично px одиниці зазвичай представляли один піксель пристрою. Якщо пристрої мають більшу та більшу щільність пікселів, це не застосовується для багатьох пристроїв, наприклад, для Retina Display від Apple.
remодиниці представляють розмір r oot em . Це з font-sizeусіх матчів :root. У випадку HTML це <html>елемент; для SVG, це те<svg> елемент. За замовчуванням font-sizeу кожному браузері * є 16px.
На момент написання, remце підтримується приблизно 98% користувачів . Якщо ви стурбовані , що інший 2%, я нагадаю вам , що запити медіа також підтримується приблизно 98% користувачів .
Про використання px
Більшість прикладів CSS в Інтернеті використовують pxзначення, оскільки вони були де-факто стандартом. pt,in і в теорії можна було б використовувати різноманітні інші одиниці , але вони не справлялися з малими значеннями, тому що вам швидко доведеться вдаватися до дробів, які довше вводити, і важче міркувати.
Якщо ви хотіли тонкої межі, pxви могли б використовувати 1px, зpt вам потрібно було б використовувати 0.75ptдля послідовних результатів, і це просто не дуже зручно.
Про використання rem
remЗначення за замовчуванням 16pxне є дуже сильним аргументом для його використання. Лист 0.0625remце гірше , ніж листи0.75pt , так чому б хто - небудь використовувати rem?
Є дві частини до remПеревага перед іншими одиницями.
- Вподобання користувачів дотримуються
- Ви можете змінити уявне
pxзначення remна все, що завгодно
Поважаючи налаштування користувачів
Збільшення браузера сильно змінилося за ці роки. Історично багато браузерів тільки збільшувались font-size, але це змінювалося досить швидко, коли веб-сайти зрозуміли, що їх прекрасні піксельні дизайни порушуються кожного разу, коли хтось збільшує чи зменшує масштаб. У цей момент браузери масштабують всю сторінку, тому масштабування на основі шрифту не виходить із зображення.
Повага до побажань користувача не виходить із картини. Тільки тому, що для браузера встановлено 16pxза замовчуванням, не означає, що будь-який користувач не може змінити свої налаштування на 24pxабо32px виправити для слабкого зору або поганої видимості (колишні відблиски екрана). Якщо ви базуєте свої одиниці rem, будь-який користувач із більшим розміром шрифту побачить пропорційно більший сайт. Бордюри будуть більшими, прокладки будуть більшими, запаси будуть більшими, все буде масштабуватися плавно.
Якщо ви базуєте свої медіа-запити rem, ви також можете переконатися, що сайт, який бачать ваші користувачі, відповідає їх екрану. Користувач з font-sizeнабором для 32pxна 640pxширокий браузер, буде ефективно бачити ваш сайт , як показано користувачеві в 16pxна 320pxширокому браузері. В RWD при використанні абсолютно немає втратrem .
Зміна видимого pxзначення
Оскільки remзаснований на font-sizeна :rootвузлі, якщо ви хочете , щоб змінити те , що 1remявляє собою, все , що вам потрібно зробити , це змінити font-size:
:root {
font-size: 100px;
}
body {
font-size: 1rem;
}
<p>Don't ever actually do this, please</p>
Що б ви не робили, не встановлюйте значення :rootелемента font-sizeдля pxзначення.
Якщо ви font-sizeувімкнено htmlаpx значенням, ви здувають власних уподобань без шляху , щоб отримати їх назад.
Якщо ви хочете змінити видиме значення rem, використовуйте %одиниці.
Математика для цього досить пряма.
Очевидний розмір шрифту :rootє 16px, але дозволяє сказати, що ми хочемо його змінити 20px. Все, що нам потрібно зробити, - це помножити 16на деяку цінність 20.
Створіть своє рівняння:
16 * X = 20
І вирішити для X:
X = 20 / 16
X = 1.25
X = 125%
:root {
font-size: 125%;
}
<p>If you're using the default font-size, I'm 20px tall.</p>
Робити все в кратних кількостях 20не все так добре, але загальна пропозиція - зробити очевидний розмір remрівним 10px. Магічне число для того, 10/16яке є 0.625, або 62.5%.
:root {
font-size: 62.5%;
}
<p>If you're using the default font-size, I'm 10px tall.</p>
Зараз проблема полягає в тому , що використовується по замовчуванням font-sizeдля іншої частини сторінки набору занадто малі, але є просте виправлення для цього: Встановити font-sizeна bodyвикористанні rem:
:root {
font-size: 62.5%;
}
body {
font-size: 1.6rem;
}
<p>I'm the default font-size</p>
Важливо зауважити, що при такому коригуванні, видиме значення remє тим, 10pxщо означає, що будь-яке значення, яке ви могли записати, pxможе бути перетворене безпосередньо rem, натискаючи на десяткове місце.
padding: 20px;
перетворюється на
padding: 2rem;
Вибір розміру шрифту залежить від вас, тому, якщо ви хочете, щоб не було причини, ви не можете його використовувати:
:root {
font-size: 6.25%;
}
body {
font-size: 16rem;
}
і мають 1remрівні 1px.
Тож у вас є це просте рішення для поваг до побажань користувачів, а також уникнення надмірного ускладнення вашої CSS.
Зачекайте, так у чому улов?
Я боявся, що ви можете це запитати. Як би я хотів зробити вигляд, що remце магія і вирішує все, все ще є певні питання. На мій погляд , нічого не порушує , але я зателефоную їм, щоб ви не могли сказати, що я вас не попередив.
Медіа-запити (використання em)
Одне з перших питань, з яким ви зіткнетеся, remстосується медіа-запитів. Розглянемо наступний код:
:root {
font-size: 1000px;
}
@media (min-width: 1rem) {
:root {
font-size: 1px;
}
}
Тут значення remзмін залежить від того, застосовується медіа-запит, а медіа-запит залежить від значення rem, і що на землі відбувається?
remу медіа-запитах використовується початкове значення font-sizeі не повинно (див. розділ Safari) враховувати будь-які зміни, які можуть статися font-sizeз :rootелементом. Іншими словами, очевидною цінністю є завжди 16px .
Це трохи дратує, бо це означає, що вам доведеться зробити деякі дробові обчислення, але я виявив, що в більшості поширених медіа-запитів вже використовуються значення, кратні 16.
| px | rem |
+------+-----+
| 320 | 20 |
| 480 | 30 |
| 768 | 48 |
| 1024 | 64 |
| 1200 | 75 |
| 1600 | 100 |
Крім того, якщо ви використовуєте препроцесор CSS, ви можете використовувати міксинги або змінні для управління вашими медіа-запитами, що повністю замаскує проблему.
Сафарі
На жаль, є відома помилка у Safari, де зміни :rootрозміру шрифту насправді змінюють обчислені remзначення для діапазонів запитів медіа. Це може викликати дуже дивну поведінку, якщо розмір шрифту :rootелемента змінюється в медіа-запиті. На щастя, виправлення просте: використовуйте emблоки для медіа-запитів .
Контекстна комутація
Якщо ви переключаєтесь між проектами на різні проекти, цілком можливо, що видимий розмір шрифту remматиме різні значення. В одному проекті ви можете використовувати видимий розмір, 10pxде в іншому проекті може бути видимий розмір 1px. Це може заплутати і викликати проблеми.
Моя єдина рекомендація тут - дотримуватися, 62.5%щоб перетворити remна очевидний розмір 10px, тому що це було більш поширеним у моєму досвіді.
Спільні бібліотеки CSS
Якщо ви пишете CSS, який буде використовуватися на веб-сайті, який ви не контролюєте, наприклад, для вбудованого віджета, насправді немає хорошого способу дізнатися, який розмір очевидного розміру remбуде мати. Якщо це так, сміливо продовжуйте користуватися px.
Якщо ви все ще хочете використовувати rem, подумайте про випуск версії таблиць стилів Sass або LESS зі змінною для зміни масштабування на видимий розмір rem.
* Я не хочу когось відлякувати від використання rem, але мені не вдалося офіційно підтвердити, що кожен браузер використовує 16pxза замовчуванням. Розумієте, браузерів дуже багато, і одному браузеру було б не так вже й важко розходитися, скажімо, 15pxабо 18px. Проте під час тестування я не бачив жодного прикладу, коли веб-переглядач, що використовував параметри за замовчуванням у системі, що використовує налаштування за замовчуванням, мав будь-яке значення, окрім 16px. Якщо ви знайдете такий приклад, будь ласка, поділіться ним зі мною.
