Rozmiary (wymiary) używane w CSS

laptop blog

Kategoria wpisu Kurs CSS, PHP, HTML, CSS Tagi: , , on przez .


1 Gwizdka2 Gwizdki3 Gwizdki4 Gwizdki5 Gwizdki (Brak ocen)
Loading...

Reading Time: 2 minutes

Jedną z najtrudniejszych rzeczy podczas budowania elementów strony w HTML i CSS jest dobieranie odpowiednich wielkości i szerokości. Wymiary długości przeważnie określane są w pikselach (px) lub procentach (%) jednak nie jest to jedyna spotykana jednostka.

Jednostki CSS (ang. CSS Units)

CSS ma kilka różnych jednostek do wyrażania rozmiarów obiektów HTML. Jednostki te mogą zostać użyte do określenia wartości takich jak:

  • width,
  • margin,
  • padding,
  • font-size,
  • border-width
  • itp.

 

W większości przeglądarki nie mają większego problemu z interpretacją popularnych wymiarów określanych w CSS jednak w przypadku mniej popularnych (choć czasami bardzo urzytecznych wygląda to nieco inaczej).

 

Nazwa jednostkiChromeInternet ExplorerFirefoxSafariOpera
em, ex, %, px, cm, mm, in, pt, pc1.03.01.01.03.5
ch27.09.01.07.020.0
rem4.09.03.64.111.6
vh, vw20.09.019.06.020.0
vmin20.09.0*19.06.020.0
vmax26.0Nie wspiera19.07.020.0

źródło: https://www.w3schools.com/cssref/css_units.asp

Przedstawione powyżej jednostki dzielą się na dwa typy: względne i bezwzględne.

Jednostki względne (relatywne)

Jednostki względne długości wykorzystujemy, gdy chcemy dostosować się rozmiaru innego elementu (np. ustawić rozmiary nagłówków odpowiednio większe od normalnego fontu, czcionki ).

Do tej grupy zaliczają się jednostki takie jak:

  • em – wysokość jest obliczana względem aktualnej czcionki (np. 3em to 3 krotność aktualnie używanego fontu)
  • ex – wysokość litery „x”, czyli małej litery w aktualnej czcionce (rzadko używana)
  • ch – względem szerokości „0” (zero)
  • rem – względem rozmiaru fontu elementu głównego

Do tej grupy zaliczają się również wymiary dostosowujące się do wymiarów okna przeglądarki internetowej:

  • vw – procentowa szerokość obszaru wyświetlania – względem szerokości okna przeglądarki
  • vh – procentowa wysokość obszaru wyświetlania – względem wysokości okna przeglądarki
  • vmin – mniejsza z wartości vw lub vh
  • vmax – większa z wartości vw lub vh
  • %
Jak to wygląda w przypadku stron responsywnych (rwd)?

Wartości z pierwszej części grupy zmieniają swoją wielkość, rozmiar tylko w przypadku gdy zmieni wartość nadrzędnego elementu. Oznacza to, że to po naszej stronie znajduje się ewentualne zmniejszenie lub zwiększenie wartości dla konkretnych wymiarów strony.

Z kolei w drugiej części grupy rozmiary elementów same się dostosowują do szerokości okna bez konieczności wprowadzania zmian. W efekcie ten sam tekst na dużym monitorze może być olbrzymi a na tablecie mały bez konieczności dopisywana dodatkowych właściwości do klas.

Jednostki bezwzględne

  • cm – centymetry
  • mm – milimetry
  • in – cale (1in = 96px = 2.54cm)
  • px – piksele (1px = 1/96th of 1in)
  • pt – punkty (1pt = 1/72 of 1in)
  • pc – picas (1pc = 12 pt)

Powyższe jednostki mają wymiar stały – każdą z nich w razie potrzeby (np. dla RWD) należy edytować osobno.

źródła:
http://www.kurshtml.edu.pl/css/dlugosc,jednostki.html
https://www.w3schools.com/cssref/css_units.asp

Rozmiary w CSS względem obszaru roboczego, czyli vw, vh, vmax i vmin

Przeczytaj również

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *