Rozmiary (wymiary) używane w CSS

laptop blog

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



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ż

Struktura strony w HTML5 Struktura prostej strony wykonanej w technologi HTML5 jest dosyć prosta. Elementy występujące w HTML5 Do najczęściej używanych elementów blokowy...
Własność CSS word-spacing word-spacing jest własnością CSS określającą wielkość odstępów pomiędzy wyrazami występującymi w danym tekście. Może przyjmować zarówno wartości dodat...
Usuwanie obramowania klikniętych linków CSS Usuwanie obramowania klikniętych linków jest dosyć proste i nie wymaga jakieś dużej wiedzy z CSS lub HTML. Używają określenia obramowanie linka mam na...
Pozycjonowanie tekstu i obrazków z pomocą CSS W jednym z poprzednich wpisów pokazałam w jaki sposób wyśrodkować obrazek lub tekst wykorzystując do tego czysty HTML. Tym razem pójdę o krok dalej i ...