Rozmiary (wymiary) używane w CSS

laptop blog

Kategoria wpisu Efekty i skrypty 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ż

Zmiana i rozjaśnienie obrazka po najechaniu kursor... Parę razy w swoim życiu szukałam skryptu dzięki któremu mogę uzyskać efekt rozjaśnienia lub zmiany wyglądu obrazka lub fotografii po najechaniu na nią...
Wyśrodkowanie zawartości kolumn względem siebie na... Dziś zajmiemy się w ostatnich czasach bardzo popularnym problemem czyli wyśrodkowaniem w pionie względem siebie zawartości dwóch lub większej ilości k...
Przerywane obramowanie – box-decoration-brea... Bardzo ciekawym selektorem CSS jest box-decoration-break, z jego pomocą możemy stworzyć tzw. przerywane obramowanie. Obramowanie to możemy umieścić np...
Paski przewijania (scroll) CSS – overflow Czasami zdarza, się że zawartość elementu (kontenera) jest większa niż przewidziana na jego ilość. Szerokość i wysokość jest są zbyt małe by pomieścić...