CSS => Jednostki długości

Wprowadzenie

Pomiar odległości CSS to liczba, po której bezpośrednio następuje jednostka długości (px, em, pc, in,…)

CSS obsługuje wiele jednostek pomiaru długości. Są absolutne lub względne.

Składnia

jednostka wartości
1em

Parametry

Jednostka	Opis
%	Zdefiniuj rozmiary w kategoriach obiektów nadrzędnych lub bieżących obiektów zależnych od właściwości
em	W stosunku do rozmiaru czcionki elementu (2em oznacza 2-krotność rozmiaru bieżącej czcionki)
rem	Względem wielkości czcionki elementu głównego
vw	W stosunku do 1% szerokości rzutni *
vh	W stosunku do 1% wysokości rzutni *
vmin	W stosunku do 1% * mniejszego wymiaru rzutni
vmax	W stosunku do 1% * większego wymiaru rzutni
cm	cm
mm	milimetry
w	cale (1 cal = 96 pikseli = 2,54 cm)
px	piksele (1px = 1/96 z 1 cala)
pt	punktów (1 pkt = 1/72 z 1 cala)
szt	pikas (1 szt. = 12 pkt)
s	sekundy (używane do animacji i przejść)
ms	milisekundy (używane do animacji i przejść)
dawny	Względem wysokości x bieżącej czcionki
ch	Na podstawie szerokości znaku zero (0)
fr	jednostka ułamkowa (używana w układzie siatki CSS)

Uwagi

Pomiędzy liczbą a jednostką nie może pojawić się biała spacja. Jeśli jednak wartość wynosi 0, jednostkę można pominąć.
W przypadku niektórych właściwości CSS dozwolone są długości ujemne.

Rozmiar czcionki z rem

CSS3 wprowadza kilka nowych jednostek, w tym jednostkę rem , która oznacza „root em”. Zobaczmy, jak działa rem .

Po pierwsze, spójrzmy na różnice między em i rem .

em : Względem rozmiaru czcionki rodzica. To powoduje problem z mieszaniem
rem : W zależności od rozmiaru czcionki elementu głównego lub elementu <html> . Oznacza to, że można zadeklarować pojedynczy rozmiar czcionki dla elementu html i zdefiniować wszystkie jednostki rem jako procent tego.

Głównym problemem związanym z używaniem rem do zmiany rozmiaru czcionek jest to, że wartości są nieco trudne w użyciu. Oto przykład niektórych popularnych rozmiarów czcionek wyrażonych w jednostkach rem , przy założeniu, że podstawowy rozmiar to 16 pikseli:

10px = 0,625rem
12px = 0,75rem
14px = 0,875rem
16px = 1rem (podstawa)
18px = 1,1255rem
20px = 1,25rem
24px = 1,5rem
30px = 1.875rem
32px = 2rem

KOD:

html { 
  font-size: 16px; 
}

h1 { 
  font-size: 2rem;          /* 32px */
}

p { 
  font-size: 1rem;          /* 16px */ 
}

li { 
  font-size: 1.5em;         /* 24px */
}

Tworzenie skalowalnych elementów za pomocą remów i ems

Możesz użyć rem zdefiniowanego przez font-size tagu html do stylizowania elementów, ustawiając ich font-size na wartość rem i użyj em wewnątrz elementu, aby utworzyć elementy skalowane wraz z globalnym font-size .

HTML:

<input type="button" value="Button">
<input type="range">
<input type="text" value="Text">

Odpowiedni CSS:

html {
  font-size: 16px;
}

input[type="button"] {
  font-size: 1rem;
  padding: 0.5em 2em;
}

input[type="range"] {
  font-size: 1rem;
  width: 10em;
}

input[type=text] {
  font-size: 1rem;
  padding: 0.5em;
}

Możliwy wynik:

vh i vw

CSS3 wprowadził dwie jednostki do reprezentowania wielkości.

vh , co oznacza viewport height odpowiada 1% wysokości rzutni
vw , co oznacza viewport width odpowiada 1% szerokości rzutni

div { 
  width: 20vw; 
  height: 20vh;
}

Powyżej rozmiar div zajmuje 20% szerokości i wysokości rzutni

vmin i vmax

vmin : W odniesieniu do 1 procent mniejszego wymiaru rzutni
vmax : W odniesieniu do 1 procent większego wymiaru rzutni

Innymi słowy, 1 vmin jest równy mniejszemu z 1 vh i 1 vw

1 vmax jest równe większej z 1 vh i 1 vw

Uwaga : vmax nie jest obsługiwane w:

dowolna wersja Internet Explorera
Safari przed wersją 6.1

używając procent%

Jedna z przydatnych jednostek podczas tworzenia responsywnej aplikacji.

Jego rozmiar zależy od kontenera nadrzędnego.

Równanie:

(Szerokość kontenera rodzica) * (Procent (%)) = Wyjście

Na przykład:

Rodzic ma szerokość 100 pikseli, a Dziecko 50% .

Na wydruku szerokość dziecka będzie wynosić połowę (50%) rodzica , czyli 50 pikseli .

HTML

<div class="parent">
   PARENT
   <div class="child">
     CHILD
   </div>
</div>

CSS

<style>

*{
  color: #CCC;
}

.parent{
  background-color: blue;
  width: 100px;
}

.child{
  background-color: green;
  width: 50%;
}

</style>

WYNIK

Modified text is an extract of the original Stack Overflow Documentation

Licencjonowany na podstawie CC BY-SA 3.0

Nie związany z Stack Overflow

CSS
Jednostki długości

Szukaj…