INF.03Frontend & CSS
Jednostki wielkości w CSS (rem, em, px, %, vh, vw)
Miary rozmiarów w stylach CSS dzielące się na bezwzględne (px) oraz elastyczne i względne (rem, em, %, vw, vh).
Porównanie jednostek CSS:
px(piksel) – jednostka bezwzględna, stała wielkość niezależna od innych elementów.rem(Root EM) – względna do rozmiaru czcionki elementu głównego<html>(domyślnie w przeglądarkach:1rem = 16px).em– względna do rozmiaru czcionki bezpośredniego rodzica (może prowadzić do efektu kaskadowego kumulowania rozmiarów).%– procentowy rozmiar względem kontenera rodzica.vw/vh(Viewport Width/Height) – 1% szerokości / wysokości całego widocznego okna przeglądarki.
CSS
html {
font-size: 16px;
}
h1 {
font-size: 2rem; /* 2 * 16px = 32px */
}
.hero-banner {
width: 100vw;
height: 50vh; /* Połowa wysokości ekranu */
}Najczęstsze pułapki na egzaminie INF.03:
- Dlaczego
remjest lepsze odpxw typografii? Ponieważ szanuje preferencje użytkownika dotyczące domyślnego rozmiaru czcionki ustawionego w przeglądarce.
Chcesz sprawdzić to pojęcie w praktyce?
Przeszukaj pytania z oficjalnych arkuszy CKE powiązane z hasłem Jednostki wielkości w CSS (rem, em, px, %, vh, vw) lub rozpocznij trening.