Ostatnio edytowany:

rem

Autor: Virtual Patriot

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

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:#AFF;
      }
    </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

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak, lecz od wersji 9

Edge

tak

Zobacz więcej informacji o interpretacji jednostki .