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ż

Niezwykłe efekty tekstowe z użyciem CSS3 Pojawienie się CSS3 było przełomowe w wielu aspektach budowy stron internetowych. Nie tylko ze względu na częściowe a niekiedy nawet całkowite zastąpi...
Wyśrodkowanie w poziomie za pomocą CSS Istnieje kilka metod na wyśrodkowanie poziomie div-a lub innego elementu strony w większości jest to związane z innymi ustawieniami takimi jak miejsce...
Gradient z wykorzystaniem CSS3 jako tło strony Słowo gradient kojarzy nam się zwykle z obrazkiem posiadającym bardzo ciekawą kolorystykę np. przechodzącym z jednej barwy w drugą. Jeszcze niedawn...
Obramowanie na stronie – CSS Obramowanie (tzw. ramka) stanowi istotny element strony internetowej nie tylko w przypadku tabel, może ono np. stanowić bardzo ciekawą dekoracją (np. ...