toolsmoah

Konwerter CSS px ↔ rem

Konwertuj jednostki CSS px i rem.

Konwerter jednostek CSS
Konwertuj piksele (px) na jednostki rem.
Wyjaśnienie jednostek CSS

px (Piksele)

Jednostka absolutna reprezentująca jeden piksel na ekranie. Ma stały rozmiar i jest ograniczona w responsywnym projektowaniu.

rem (Root EM)

Jednostka względna oparta na rozmiarze czcionki elementu głównego (html). Korzystna dla dostępności i responsywnego projektowania.

Wzór konwersji

px → rem: px ÷ podstawowy rozmiar czcionki
rem → px: rem × podstawowy rozmiar czcionki

Zalecenia użycia

  • • Rozmiar czcionki: zalecane rem
  • • Odstępy (margin, padding): zalecane rem
  • • Obramowanie: użyteczne px
  • • Zapytania media: zalecane rem
Popularne wartości konwersji
px
rem
8px
0.5rem
12px
0.75rem
14px
0.875rem
16px
1rem
18px
1.125rem
20px
1.25rem
24px
1.5rem
32px
2rem

Kompletny przewodnik jednostek CSS

Wybór odpowiednich jednostek CSS w tworzeniu stron internetowych znacząco wpływa na doświadczenie użytkownika i dostępność. Poznaj różnice między px i rem oraz sposób ich wykorzystania w odpowiednich sytuacjach.

Szczegółowy przewodnik jednostki Piksel (px)

📐 Cechy

  • • Jednostka absolutna z korespondencją 1:1 do pikseli ekranu
  • • Spójny rozmiar we wszystkich przeglądarkach
  • • Możliwa precyzyjna kontrola układu
  • • Nie wpływają na nią ustawienia użytkownika

✅ Zalecane przypadki użycia

  • • Grubość obramowania (1px, 2px)
  • • Przesunięcie cienia
  • • Rozmiary ikon (16px, 24px)
  • • Precyzyjne dostrojenia odstępów

⚠️ Ostrzeżenia

  • • Ignoruje ustawienia rozmiaru czcionki użytkownika
  • • Może powodować problemy z dostępnością
  • • Ograniczone dla responsywnego projektowania
Szczegółowy przewodnik jednostki rem

📐 Cechy

  • • Oparte na rozmiarze czcionki elementu głównego (html)
  • • Odzwierciedla ustawienia użytkownika
  • • Zachowuje spójne proporcje
  • • Przyjazne dostępności

✅ Zalecane przypadki użycia

  • • Ustawienia rozmiaru czcionki
  • • Odstępy (margin, padding)
  • • Rozmiary kontenerów
  • • Punkty przerwania zapytań media

💡 Zalety

  • • Zachowuje proporcje podczas skalowania
  • • Poprawia dostępność
  • • Łatwa konserwacja
Przewodnik praktycznego zastosowania

🎯 Strategia użycia jednostek

Typografia

Używaj rem dla rozmiarów czcionek i interlini rem

Układ

Używaj rem dla odstępów i kontenerów rem

Szczegóły

Używaj px dla obramowań i cieni px

📱 Wskazówki responsywnego projektowania

Podejście mobile-first

Ustaw podstawowy rozmiar czcionki na 16px i skaluj jednostkami rem

html { font-size: 16px; }
h1 { font-size: 2rem; /* 32px */ }
Użycie zapytań media

Zachowaj spójność z punktami przerwania opartymi na rem

@media (min-width: 48rem) { /* 768px */ }
html { font-size: 18px; }
}

♿ Rozważania dotyczące dostępności

✅ Zalecane praktyki
  • • Ustaw rozmiary czcionek jednostkami rem
  • • Zachowuj minimalny rozmiar czcionki 16px
  • • Wystarczająca interlinia (1.5 lub więcej)
  • • Minimalny cel dotykowy 44px
❌ Rzeczy do unikania
  • • Używanie stałych wartości px dla rozmiarów czcionek
  • • Mały tekst poniżej 12px
  • • Stałe szerokości kontenerów
  • • Interlinia 1.0 lub mniej

🔧 Wsparcie przeglądarek i kompatybilność

Jednostka px

Doskonałe wsparcie we wszystkich przeglądarkach. Dostępne od IE6+.

Jednostka rem

Doskonałe wsparcie w IE9+ i nowoczesnych przeglądarkach. Wymagane fallback dla IE8 i starszych.

Dla wsparcia IE8: Zadeklaruj najpierw wartość px, następnie dodaj wartość rem jako fallback

font-size: 18px; /* IE8 fallback */
font-size: 1.125rem; /* Modern browsers */