Px vs. Em vs. Rem: której jednostki CSS należy użyć?

Px vs. Em vs. Rem: której jednostki CSS należy użyć?

Nauczysz się kilku jednostek CSS do dostosowywania rozmiaru czcionki tekstu podczas tworzenia stron internetowych. Istnieje wiele jednostek, takich jak pt, pc, ex itp., ale w większości przypadków należy skupić się na trzech najpopularniejszych jednostkach: px, em i rem. Wielu programistów zwykle nie rozumie, jakie są różnice między tymi jednostkami; więc poniżej znajduje się szczegółowe wyjaśnienie tych jednostek.





MAKEUSEOF WIDEO DNIA

Zanim przejdziesz dalej, zwróć uwagę, że istnieją dwa rodzaje długości jednostki: absolutny oraz względny .



jak zdobyć kanały lokalne na Roku?

Długości bezwzględne

Jednostki długości bezwzględnej są stałe, a długość wyrażona w którejkolwiek z nich będzie wyglądać dokładnie tak samo.





Jednostki długości bezwzględnej nie są zalecane do używania na ekranie, ponieważ rozmiary ekranu są bardzo różne. Można ich jednak użyć, jeśli znany jest nośnik wyjściowy, na przykład w przypadku układu drukowanego.

Jednostka Opis
cm cm
mm milimetry
w cale (1 cal = 96px = 2,54 cm)
piks. * piksele (1 piksel = 1/96 z 1 cala)
pt punkty (1 pkt = 1/72 z 1 cala)
szt pik (1 szt. = 12 pkt.)

Względne długości

Jednostki długości względnej określają długość względem innej właściwości długości. Jednostki długości względnej lepiej skalują się między różnymi nośnikami renderowania.



Jednostka Względem
w* Względem rozmiaru czcionki elementu (2em oznacza 2 razy większy rozmiar od aktualnej czcionki)
były Względem wysokości x bieżącej czcionki (rzadko używane)
ch Względem szerokości „0” (zero)
rem* Względem rozmiaru czcionki elementu głównego
vw W stosunku do 1% szerokości widocznego obszaru*
vh W stosunku do 1% wysokości rzutni*
min W stosunku do 1% mniejszego wymiaru widocznego* mniejszego wymiaru
vmax W stosunku do 1% większego obszaru widocznego* większego wymiaru
% Względem elementu nadrzędnego

1. piksel (piksel)

Pixel jest prawdopodobnie najczęściej używaną jednostką w CSS i jest bardzo popularny, jeśli chodzi o ustawienie rozmiaru czcionki tekstu na stronach internetowych. Jeden piksel (1 piksel) jest zdefiniowany jako 1/96 cala w nośniku druku.

Jednak na ekranach komputerów nie są one zwykle związane z rzeczywistymi wymiarami, takimi jak centymetry i cale, jak mogłoby się wydawać; są one po prostu zdefiniowane jako małe, ale widoczne. To, co jest uważane za widoczne, zależy od urządzenia.



Różne urządzenia mają różną liczbę pikseli na cal na swoich ekranach, co jest znane jako gęstość pikseli. Jeśli użyjesz liczby fizycznych pikseli na ekranie urządzenia do określenia rozmiaru treści na tym urządzeniu, będziesz miał problem z tym, aby wszystko wyglądało tak samo na ekranach wszystkich rozmiarów.

W tym miejscu pojawia się współczynnik pikseli urządzenia. Zasadniczo jest to sposób na obliczenie, ile miejsca na ekranie urządzenia zajmie piksel CSS (1px), dzięki czemu będzie wyglądać tak samo w porównaniu z innym urządzeniem.



Poniżej znajduje się przykład:-

<div class="container"> 
     <div> 
       <h1>This is a paragraph</h1> 
       <p> 
         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 assumenda distinctio aliquid debitis, autem 
         vel ullam aut, quod corporis ratione atque ducimus dolorum. 
       </p> 
     </div> 
   </div> 
.container { 
  width: 100%; 
  height: 100vh; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
} 
.container div { 
  max-width: 500px; 
  padding: 5px 20px; 
  border: 1px grey solid; 
  border-radius: 10px; 
} 
p { 
  font-size: 16px; 
}

wyjście

wielkość-treści-w-pikselach-jednostka-miary-css

Górne pole to tak, jak wygląda, gdy jest wyświetlane na większym ekranie, takim jak laptop, a dolne pole to, jak wygląda po wyświetleniu na mniejszym ekranie, takim jak telefon .

Zwróć uwagę, że tekst w obu polach ma ten sam rozmiar. W zasadzie tak działa piksel. Dzięki temu treści internetowe (nie tylko tekst) mają ten sam rozmiar na różnych urządzeniach.

2. Ja (M)

Jednostka em ma swoją nazwę od wielkiej litery „M” (em), ponieważ większość jednostek CSS pochodzi z typografii. Używa bieżącego rozmiaru czcionki elementu nadrzędnego jako podstawy. Może być używany do skalowania w górę lub zmniejszania rozmiaru czcionki elementu na podstawie rozmiaru czcionki odziedziczonego po rodzicu.

Załóżmy, że masz nadrzędnego div, którego czcionka wynosi 16 pikseli. Jeśli utworzysz element akapitu w tym div i nadasz mu rozmiar czcionki 1 em, rozmiar czcionki akapitu wyniesie 16 pikseli.

jak zostać recenzentem winorośli amazon

Jeśli jednak podasz inny akapit o rozmiarze czcionki 2em, przełoży się to na 32px. Rozważ poniższy przykład:

   <div class="div-one"> 
      <p class="one-em">1 em based on 10px</p> 
      <p class="two-em">2 em based on 10px</p> 
  </div> 
    <div class="div-two"> 
     <p class="one-em">1 em based on 10px</p> 
     <p class="two-em">2 em based on 10px</p> 
    </div> 
   </div> 
.div-one { 
  font-size: 15px; 
} 
.div-two { 
  font-size: 20px; 
} 
.one-em { 
  font-size: 1em; 
} 
.two-em { 
  font-size: 2em; 
}

wyjście

zawartość strony internetowej o rozmiarze w jednostkach miary em css

Możesz zobaczyć, jak em może skalować rozmiar tekstu i jak wpływa na to bieżący rozmiar czcionki odziedziczony z kontenera nadrzędnego. Nie zaleca się używania em, zwłaszcza w przypadku złożonych stron strukturalnych.

Jeśli nie są używane prawidłowo, możesz napotkać problemy ze skalowaniem, w których elementy mogą nie mieć odpowiedniego rozmiaru w oparciu o złożone dziedziczenie rozmiarów w drzewie DOM.

3. Rem (korzeń Em)

Rem działa prawie tak samo jak em, ale główna różnica polega na tym, że rem odwołuje się tylko do rozmiaru czcionki elementu głównego na stronie, a nie do rozmiaru czcionki rodzica. Główny rozmiar czcionki to domyślny rozmiar czcionki określony przez użytkownika w ustawieniach przeglądarki lub przez programistę.

czy aplikacje można przenieść na kartę SD?

Domyślny rozmiar czcionki przeglądarki internetowej to zwykle 16px, więc 1rem będzie miał 16px, a 2rem będzie 32px. Jednak w przypadku, gdy główny rozmiar czcionki zostanie zmieniony na przykład na 10px; 1rem będzie miał 10px, a 2rem będzie miał 20px.

Oto przykład, aby wszystko było jaśniejsze:

   <div class="div-one"> 
     <!-- EM --> 
     <p class="one-em">1 em based on container (40px)</p> 
     <p class="two-em">2 em based on container (40px)</p> 
     <!-- REM --> 
     <p class="one-rem">1 rem based on root (16px)</p> 
     <p class="two-rem">2 rem based on root (16px)</p> 
   </div> 
.div-one { 
  font-size: 40px; 
} 
.one-em { 
  font-size: 1em; 
} 
.two-em { 
  font-size: 2em; 
} 
.one-rem { 
  font-size: 1rem; 
} 
.two-rem { 
  font-size: 2rem; 
}

wyjście

zawartość strony internetowej zwymiarowana w rem css jednostka miary

Jak widać, akapity zdefiniowane jednostkami REM są całkowicie niezakłócone rozmiarem czcionki zadeklarowanym w naszym kontenerze i są ściśle renderowane względem główny rozmiar czcionki zdefiniowany w selektorze elementów HTML.

Px vs. Em vs. Rem: Która jednostka jest najlepsza?

Em nie jest zalecane ze względu na możliwość posiadania złożonej hierarchii elementów zagnieżdżonych. REM jest zwykle odpowiednio skalowany z nowym domyślnym/podstawowym rozmiarem czcionki określonym w ustawieniach przeglądarki, w przeciwieństwie do PX. To wyjaśnia, dlaczego powinieneś używać REM podczas pracy z treścią tekstową na swoich stronach internetowych. REM wygrywa wyścig. Lepsza stylizacja i skalowanie treści dzięki REM dodają stylu Twojej witrynie, ponieważ jest to idealne rozwiązanie dla twórców witryn. Punktowe pomiary treści będą dyktować wygląd Twojej witryny, jednak musisz wykazać się kreatywnością.