rem
- Data publikacji
- Ostatnio edytowano
Przeznaczenie jednostki rem
Długość wyrażona za pomocą jednostki rem obliczana jest przez przeglądarkę internetową na podstawie wartości właściwości font-size, jaką posiada element HTML pełniący rolę głównego korzenia dokumentu HTML. W kontekście języka HTML5 mowa tu najczęściej o elemencie html.
"1rem" = wartość właściwości "font-size" elementu HTML pełniącego rolę głównego korzenia dokumentu HTML
Przykład jednostki rem
width:20rem;
rozmiar szerokości obszaru zawartości tego elementu "div" wynosi "20rem", ponieważ do tego elementu "div" została dodana właściwość "width" wraz z wartością "20rem", ponadto do elementu "html" znajdującego się w zawartości tego dokumentu HTML została dodana właściwość "font-size" wraz z wartością "16px", dlatego wartość "20rem" jest równa "320px", bo "20rem=20×16px=320px"
Kod źródłowy przykładu
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
div {
width:20rem;
font-size:1.3em;
background-color:#7DCDE8;
}
</style>
</head>
<body>
<div>
rozmiar szerokości obszaru zawartości tego elementu "div" wynosi "20rem", ponieważ do tego elementu "div" została dodana właściwość "width" wraz z wartością "20rem", ponadto do elementu "html" znajdującego się w zawartości tego dokumentu HTML została dodana właściwość "font-size" wraz z wartością "16px", dlatego wartość "20rem" jest równa "320px", bo "20rem=20×16px=320px"
</div>
</body>
</html>Interpretacja jednostki rem
-
tak
-
tak
-
tak
-
tak
-
tak, lecz od wersji 9
-
tak
Zobacz więcej informacji o interpretacji jednostki rem.