Różnica między PX, EM, % w CSS

CSS oferuje różnorodne funkcje w zmianie wielkości elementu. Najczęstsze spośród tych jednostek są PX, EM i %(procent). Dla początkującego trudno byłoby zrozumieć różnicę między nimi, dzięki czemu najwięcej ćwiczą jednostkę PX. Jednak EM %(odsetek) służy responsywnemu zachowaniu elementów. Biorąc pod uwagę znaczenie tych wszystkich, w tym artykule przedstawiono przewodnik, który zapewnia różnicę między PX, EM i %(procent).

Ten post pokazuje różnicę między PX, EM i %(procent). Ponadto dowiesz się również o realnej długościach jednostek i ich różnic i ich różnicach.

Jaka jest różnica między PX, EM i procentem (%) w CSS?

W CSS jednostki wielkości są podzielone na dwie kategorie, miarę bezwzględną i względną.

Jednostki absolutne

Jednostki bezwzględne mają ustalone wartości, dlatego nie zmieniają ich wartości, dopóki użytkownik je nie zmieni ręcznie. px Jednostka należy do bezwzględnej kategorii jednostek wielkości w CSS. Chociaż PX nie jest dobry dla reaktywności, nadal jest praktykowane tam, gdzie elementy wymagają stałych rozmiarów na ekranie. Ponadto nowy użytkownik ma tendencję do użycia px jako jednostka wielkości, ponieważ jest łatwa w obsłudze i nie zależy od żadnej innej jednostki lub elementu rozmiaru.

Jednostki względne

Pozostałe dwa em I odsetek należą do względnej kategorii elementów, ponieważ oboje zmieniają swoje zachowanie, aby zarządzać reakcją.

EM: Ta jednostka odnosi się do rozmiaru czcionki elementu nadrzędnego/root. Można go również użyć do regulacji szerokości/wysokości, ale wartość 1EM wynosiłaby 16px.

odsetek(%): Jednostka procentowa pokazuje trafność elementu nadrzędnego.

Na przykład, jeśli element nadrzędny określa szerokość = „10px". Teraz ta wartość zostanie uznana za odniesienie do powiązania szerokości w odsetek.

Notatka: CSS oferuje różne inne jednostki względne, które obejmują REM, VW (szerokość portu View) i VWH (wysokość portu View) również należą do kategorii względnej.

Przykład: za pomocą wartości PX, EM i procentowych

Ćwiczono następujący kod HTML, osiągając różnicę między wartościami PX, EM i procentowymi.

Html

szerokość w %

Rozmiar czcionki w EM

W powyższym kodzie istnieją elementy dwóch rodziców (tagi div), a każdy rodzic ma jedno dziecko. Pierwsza rodzicielska Div zawiera akapit, który wykonywałby szerokość w procentach, a druga Div macierzysty rozważa rozmiar czcionki elementu.

CSS

Powyższe CSS byłyby głównym interesariuszem w wykazaniu różnicy między PX, EM i procentem. Szerokość tagów DIV jest ustawiona na 250px, co oznacza, że ​​byłaby równa 100%. Na przykład w powyższym kodzie .na klasę wymaga 75% całkowitej szerokości (250px).

Podobnie wielkość czcionki drugiego elementów div jest ustawiona na 12px, co oznacza, że ​​1EM byłby równy 12px. Jeśli wartość EM zostanie zmieniona, zmieniłaby się w stosunku do 12px (na podstawie elementu nadrzędnego).

Wyjście

Z wyjścia obserwuje się, że szerokość elementu dziecka (akapit) została skorygowana do 75% jego elementu nadrzędnego (Div). Ponadto rozmiar czcionki jest ustawiony na 2EM, co oznacza, że ​​byłby dwa razy w porównaniu z wielkością czcionki jego elementu nadrzędnego (12px = 1EM).

Wniosek

px należy do bezwzględnej kategorii jednostek długości, podczas gdy EM i %(procent) odnosi się do względnej klasy jednostek wielkości. Wartość px jest ustalony na dokumencie HTML, ale em I %(odsetek) zależy od jednostki używanej przez element nadrzędny. EM głównie manipuluje wielkość czcionki elementów HTML i (%) jednostki procentowej przede wszystkim odnosi się do zmiany wysokości/szerokości elementu HTML (zgodnie z elementem nadrzędnym). W tym artykule nauczyłbyś się podstaw różnych jednostek, takich jak PX, EM i procent. Dla lepszego zrozumienia wykazaliśmy przykład, który lepiej wyjaśnia różnicę między wszystkimi tymi jednostkami.