Px срещу. Ем срещу Rem: Коя CSS единица трябва да използвате?

Ще научите няколко CSS единици за персонализиране на размера на шрифта на текста при изграждане на уеб страници. Има много единици като pt, pc, ex и т.н., но в повечето случаи трябва да се съсредоточите върху трите най-популярни единици: px, em и rem. Много разработчици обикновено не разбират какви са разликите между тези единици; така че по-долу е подробно обяснение на тези единици.

Преди да продължите, имайте предвид, че има два вида единици дължини: абсолютен и роднина.

Абсолютни дължини

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

Единиците за абсолютна дължина не се препоръчват за използване на екрана, тъй като размерите на екрана са много различни. Те обаче могат да се използват, ако изходният носител е известен, като например за печатно оформление.

Относителни дължини

Единиците за относителна дължина определят дължина спрямо друго свойство на дължина. Единиците за относителна дължина се мащабират по-добре между различните среди за изобразяване.

1. Px (пиксел)

Пикселът е може би най-използваната единица в CSS и е много популярен, когато става въпрос за задаване на размера на шрифта на текст на уеб страници. Един пиксел (1px) се определя като 1/96 от инча в печатните медии.

На компютърните екрани обаче те обикновено не са свързани с действителни измервания като сантиметри и инчове, както може би си мислите; те просто са определени като малки, но видими. Какво се счита за видимо зависи от устройството.

Различните устройства имат различен брой пиксели на инч на своите екрани, което е известно като плътност на пикселите. Ако сте използвали броя на физическите пиксели на екрана на дадено устройство, за да определите размера на съдържанието на това устройство, ще имате проблем да накарате нещата да изглеждат еднакви на екрани с всички размери.

Тук идва съотношението на пикселите на устройството. По същество това е просто начин да се изчисли колко място ще заеме CSS пиксел (1px) на екрана на устройството, което ще му позволи да изглежда със същия размер в сравнение с друго устройство.

По-долу е даден пример: -

<div клас="контейнер">
<див>
<h1>Това е параграф</h1>
<стр>
 Lorem ipsum, dolor sit amet consectetur adipisicing elit.
 Reprehenderit incidunt perferendis iure veritatis cupiditate delectus
 omnis at! Officiis praesentium officia, nemo veniam consequatur
 nostrum sunt aliquid ipsam, corporis quas quaerat. Lorem ipsum dolor
 sit amet consectetur adipisicing elit. Hic quam beatae voluptatibus
 amet possimus iure impedit acceptenda distinctio aliquid debitis, autem
 vel ullam aut, quod corporis ratione atque ducimus dolorum.
</стр>
</div>
</div>

.контейнер {
 ширина: 100%;
 височина: 100vh;
 дисплей: гъвкав;
 justify-content: център;
 подравняване на елементи: център;
}
.контейнердив {
 максимална ширина: 500px;
 подложка: 5px 20px;
 рамка: 1px плътно сиво;
 радиус на границата: 10px;
}
p {
 размер на шрифта: 16px;
}

изход

Горното поле е как изглежда, когато се показва на по-голям екран като лаптоп, а долното поле е как изглежда когато се показва на по-малък екран, като телефон.

Забележете как текстът в двете полета е с еднакъв размер. Това е принципът, по който работи пикселът. Той помага на уеб съдържанието (не само текст) да изглежда с еднакъв размер на всички устройства.

2. Ем (М)

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

Да приемем, че имате родителски div с размер на шрифта 16px. Ако създадете елемент на абзац в този div и му зададете размер на шрифта 1em, размерът на шрифта на абзаца ще бъде 16px.

Ако обаче дадете на друг абзац размер на шрифта 2em, това ще се преведе на 32px. Разгледайте примера по-долу:

<div клас="div-едно">
<p клас="един-ем">1 em въз основа на 10px</стр>
<p клас="две-ем">2 em на базата на 10px</стр>
</div>
<div клас="div-две">
<p клас="един-ем">1 em въз основа на 10px</стр>
<p клас="две-ем">2 em на базата на 10px</стр>
</div>
</div>

.div-едно {
 размер на шрифта: 15px;
}
.div-две {
 размер на шрифта: 20px;
}
.one-em {
 размер на шрифта: 1em;
}
.два-ем {
 размер на шрифта: 2em;
}

изход

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

Ако не се използва правилно, може да се натъкнете на проблеми с мащабирането, при които елементите може да не са оразмерени правилно въз основа на сложно наследяване на размери в DOM дървото.

3. Rem (Root Em)

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

Размерът на шрифта по подразбиране на уеб браузър обикновено е 16px, следователно 1rem ще бъде 16px, а 2rem ще бъде 32px. Въпреки това, в случай, когато основният размер на шрифта е променен на 10px например; 1rem ще бъде 10px, а 2rem ще бъде 20px.

Ето един пример, за да стане по-ясно:

<div клас="div-едно">
<!-- EM -->
<p клас="един-ем">1 em въз основа на контейнер (40px)</стр>
<p клас="две-ем">2 em въз основа на контейнер (40px)</стр>
<!-- REM -->
<p клас="едно-рем">1 rem въз основа на root (16px)</стр>
<p клас="дву-рем">2 rem въз основа на root (16px)</стр>
</div>

.div-едно {
 размер на шрифта: 40px;
}
.one-em {
 размер на шрифта: 1em;
}
.два-ем {
 размер на шрифта: 2em;
}
.едно-рем {
 размер на шрифта: 1 rem;
}
.дву-рем {
 размер на шрифта: 2 rem;
}

изход

Както можете да видите, параграфите, дефинирани с REM единици, са напълно необезпокоявани от размера на шрифта, деклариран в нашия контейнер, и са стриктно изобразени спрямо основният размер на шрифта, определен в селектора на HTML елементи.

Px срещу. Ем срещу Rem: Кое устройство е най-доброто?

Em не се препоръчва поради възможността да има сложна йерархия от вложени елементи. REM обикновено се мащабира по подходящ начин с новия размер на шрифта по подразбиране/основен, определен в настройките на браузъра, за разлика от PX. Това обяснява защо трябва да използвате REM, когато работите с текстово съдържание на вашите уеб страници. REM печели състезанието. По-добрият стил и мащабирането на съдържанието ви с REM добавят стил към вашия сайт, тъй като е идеален за създателите на уебсайтове. Измерванията на място на съдържанието ви ще определят външния вид и усещането на уебсайта ви, но ще трябва да проявите креативност.