В CSS каква е разликата между em и px?


Отговор 1:

В крайна сметка всичко е пиксела

В крайна сметка уеб браузърът казва на операционната система да каже на драйвер на дисплея да постави нещо на екрана в пиксели.

Но този „пиксел“ е физически пиксел. Това е, което бихме могли да наречем „пиксел на устройството“.

Не говориш за „пиксели на устройства“. Говорите за CSS пиксели.

CSS пиксели! == пиксели

„CSS Pixel“ е приблизително някакъв вид-sorta-ish близо до ish пиксел на устройството. [1] CSS Pixel разчита на тази идея за „референтен пиксел“, това е зрителният ъгъл на устройство с плътност на пикселите 96 dpi на дължина около една ръка. [2] Чрез силата на математиката, „референтният пиксел“ може да свърши като е 1,3 мм на екран. Но има редица причини, които може да не са така.

Важно е да започнем с основната точка, която px не означава „пиксел на екран“.

В CSS има различни мерни единици

Има две основни категории на мерните ви единици [3]:

  1. абсолютни единици относителни единици

ако е „абсолютна единица“, тогава тази мерна единица има отношение към нещо във физическия свят.

Ако е относителна единица, тогава стойността се изчислява в абсолютна единица.

Така px vs em

px е „абсолютна единица“; CSS двигателят ще каже на браузъра да използва тази "дължина" за оразмеряване. Браузърът и операционната система ще решат как тази дължина се сравнява с „пиксел на устройството“ и ще я рендират. Px има статична връзка с този „референтен пиксел“, за който говорихме по-рано. px няма да се промени.

em е "относителна единица". CSS двигателят първо ще изчисли тази стойност в дължина на пиксела. След като изчисли дължината на пиксела, тя ще изпрати тази изчислена стойност на браузъра. em, в частност, се изчислява въз основа на относителния размер на шрифта на съдържащия елемент. Стойността на em може да се променя; ако промените размера на шрифта на който и да е родителски елемент, това ще повлияе на стойността на em.

Най-добрият начин да мислите за em е да се преструвате, че емитиран бит ги няма и да третирате стойността като множител. например:

.foo {font-size: 1.5em; / * объркващо * / размер на шрифта: 1.5; / * Не валидно, но напълно би трябвало да е направено вместо да го наречем em * / line-height: 1.5; / * вижте как височината на линията приема умножител без единица? * /}

Така че първата голяма разлика е, че едното е абсолютно, другото е относително.

px и em в приложението

Различните ситуации ще подчертаят силните и слабите страни на всяка единица [4].

Тъй като px е абсолютна мерна единица, имате висока предсказуемост за това, което получавате на екрана. Но нямате пропорционалност; свойствата с размер в px не се преизчисляват, ако коригирате размер на шрифта в родител.

Така че се сблъсквате с това много:

тяло {font-size: 16px;} h1 {font-size: 32px; / * абсолютни единици за размер на шрифта * / подплънки: 8px 16px; / * абсолютни единици за подплънки * /} .foo {font-size: 12px; / * коригирайте размера на шрифта в родител * /} / * напишете нов набор от правила, за да поддържате нещата пропорционални * / .foo h1 {font-size: 24px; / * пренаписване на правило за шрифт, за да направи h1 2x нормално * / padding: 6px 12px; / * пренаписване за 1/4 и 1/2 * /}

Тъй като em е относителна единица, базирана на наследен размер на шрифта, бихте могли да имате ниска предсказуемост за това, което получавате на екрана - особено в големи екипи. Но ще имате висока пропорционалност; свойства, оразмерени в em, ще преизчислят, ако коригирате размер на шрифта в родител.

тяло {font-size: 16px;} h1 {font-size: 2em; / * относителна единица * / подплънка: .25em .5em; / * относителни единици за подплънки * /} .foo {font-size: .75em; }

Така че сте запазили писането на цял набор от правила, като използвате em. Размерът на шрифта се изчислява на 24px, а подложката се изчислява на 6px 12px.

Така че голямата разлика е във възможността да имаш размер на нещата пропорционално - без да пишеш повече код!

Бележки под линия

[1] Синтаксис и основни типове данни

[2] CSS стойности и единици модул ниво 3

[3] Как "em" "px" и "%" се различават един от друг в CSS?

[4] Отзивчивите уебсайтове се отнасят за това как измервате (във вашия CSS)


Отговор 2:

px е пиксели. Може да е малко по-различно в различните браузъри, но вероятно е съвместимо в една и съща среда и в един сайт на даден браузър / устройство. px има смисъл за неща като ширина на линията и границата.

em е същият като размера на шрифта на текущия елемент (който обикновено е наследен). И тъй като размерът на шрифта се променя, стойността на em също се променя. Това е удобно, когато искате да поместите нещо относително към текущия размер на текста. Освен това е полезно, тъй като е относително към друго съдържание, така че е по-вероятно да работи на екрани. em е особено полезна за настройка на интервали, полета и подплънки около текст.

rem е root em. Това е точно като em, но вместо да е относително към текущия размер на шрифта, то е относително към оригиналния размер на шрифта на документа. Това означава, че rem ще остане последователен в една страница, независимо от текущия шрифт. В много ситуации с Rem е по-лесно да се работи, защото е по-предсказуем. Особено има смисъл за полета, които трябва да останат последователни в един документ, дори когато местните размери на шрифта се променят между елементите.

По принцип em и rem са по-лесни за поддържане на страница, а общият консенсус в момента е да се използват em и rem, а не px. Общият консенсус не винаги е правилен, но това е добър начин, освен ако нямате основателна причина да направите нещо друго.


Отговор 3:

px е пиксели. Може да е малко по-различно в различните браузъри, но вероятно е съвместимо в една и съща среда и в един сайт на даден браузър / устройство. px има смисъл за неща като ширина на линията и границата.

em е същият като размера на шрифта на текущия елемент (който обикновено е наследен). И тъй като размерът на шрифта се променя, стойността на em също се променя. Това е удобно, когато искате да поместите нещо относително към текущия размер на текста. Освен това е полезно, тъй като е относително към друго съдържание, така че е по-вероятно да работи на екрани. em е особено полезна за настройка на интервали, полета и подплънки около текст.

rem е root em. Това е точно като em, но вместо да е относително към текущия размер на шрифта, то е относително към оригиналния размер на шрифта на документа. Това означава, че rem ще остане последователен в една страница, независимо от текущия шрифт. В много ситуации с Rem е по-лесно да се работи, защото е по-предсказуем. Особено има смисъл за полета, които трябва да останат последователни в един документ, дори когато местните размери на шрифта се променят между елементите.

По принцип em и rem са по-лесни за поддържане на страница, а общият консенсус в момента е да се използват em и rem, а не px. Общият консенсус не винаги е правилен, но това е добър начин, освен ако нямате основателна причина да направите нещо друго.