CSS Academy · Lekcja

Jednostki absolutne: px, pt i cm

Poznają Państwo, kiedy stosować stałe jednostki absolutne, takie jak piksele, punkty i centymetry.

Lekcja 1 z 413 kroki

Jednostki absolutne: px, pt i cm to bezpłatna lekcja CSS Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej CSS Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs CSS Academy zawiera 4 lekcji w sumie.

Jednostki bezwzględne a względne

Jednostki CSS dzielą się na dwie kategorie: bezwzględne (stałe, rzeczywiste miary) oraz względne (skalowane względem czegoś innego). Jednostki bezwzględne są niezależnymi od urządzenia miarami fizycznymi.

px — piksele

Piksel (px) to najczęściej używana bezwzględna jednostka na ekranach. Na standardowych wyświetlaczach 1px = 1 piksel urządzenia. Na ekranach o wysokiej gęstości pikseli (Retina) piksele CSS odpowiadają wielu pikselom urządzenia, dzięki czemu elementy zachowują ten sam rozmiar wizualny.

<button class="button">10px 20px padding</button>

pt — punkty

Punkt (pt) to jednostka pochodząca z projektowania do druku: 1pt = 1/72 cala. W CSS 1pt = 4/3px (około 1,33px). Jest używana głównie w arkuszach stylów do druku przy definiowaniu typografii.

<p class="print-text">This text is sized in points (12pt), the unit used in print stylesheets.</p>

cm, mm, in — jednostki fizyczne

CSS obsługuje centymetry (cm), milimetry (mm) i cale (in). Jednostki te mają sens w kontekście druku, ale są niewiarygodne na ekranach, ponieważ DPI ekranu może się różnić.

<div class="page">A4-width page (21cm), used for print layouts</div>

px na ekranach: zastosowanie praktyczne

W projektowaniu stron internetowych przeznaczonych na ekrany px to jedyna praktyczna jednostka bezwzględna. Mimo to odradza się używanie px do określania rozmiaru czcionki, ponieważ nadpisuje preferencje użytkownika dotyczące rozmiaru czcionki w przeglądarce.

Współczynnik pikseli urządzenia

Nowoczesne wyświetlacze mają współczynnik pikseli urządzenia (DPR) > 1. Ekran Retina 2x renderuje 2 piksele urządzenia na każdy piksel CSS. Dlatego obrazy przeznaczone na ekrany o wysokiej gęstości pikseli muszą mieć rozmiar 2 lub 3 razy większy od rozmiaru wyświetlania.

<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='300'><rect width='400' height='300' fill='%23ff6347'/><circle cx='200' cy='150' r='100' fill='%231e90ff'/></svg>" alt="sample image" />

Kiedy używać px

Używaj px do:

szerokości obramowań (1px zapewnia wyraźne krawędzie)
cieni i transformacji
punktów przerwania zapytań o media (choć punkty przerwania oparte na em są bardziej niezawodne)
stałych elementów interfejsu, gdy potrzebna jest dokładna kontrola pikselowa

Kiedy NIE używać px w typografii

Ustawienie font-size: 16px na elemencie html lub body w wielu przeglądarkach nadpisuje preferencje użytkownika dotyczące dostępności. Zamiast tego używaj jednostki rem względem domyślnego rozmiaru czcionki przeglądarki.

Q — ćwierć milimetra

Jednostka q to 1/4 milimetra. Jest używana w japońskiej typografii drukowanej do precyzyjnej kontroli typografii. Rzadko stosuje się ją w ogólnym projektowaniu stron internetowych.

PC — piki

Pika (pc) odpowiada 12 punktom lub 1/6 cala. Podobnie jak punkty, piki są jednostkami drukarskimi, które rzadko są potrzebne na ekranach cyfrowych.

Jednostki bezwzględne w arkuszach stylów do druku

Arkusze stylów do druku są głównym uzasadnionym zastosowaniem jednostek bezwzględnych w CSS. Jednostki fizyczne zapewniają dokładne wymiary drukowanej strony na papierze.

<div class="print-body">
    <p class="page-break">Section one (page breaks after this when printed)</p>
    <p>Section two</p>
  </div>

Szybkie sprawdzenie

Która bezwzględna jednostka CSS odpowiada 1/72 cala?

Odpowiedz w interaktywnej lekcji

Podsumowanie

Jednostki bezwzględne to stałe miary niezależne od elementów nadrzędnych. px to praktyczna jednostka ekranowa. Jednostki fizyczne (pt, cm, in) są używane w arkuszach stylów do druku. Unikaj używania px w typografii — nadpisuje ono preferencje użytkownika dotyczące rozmiaru czcionki. Zamiast tego używaj rem.

Bezpłatny start

Ucz się CSS dzięki korepetycjom AI — za darmo

Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.

Kursy: 40
Lekcje: 159

Zacznij naukę bezpłatnie Wyświetl pełny kurs

Często zadawane pytania

Czy lekcja „Jednostki absolutne: px, pt i cm” jest bezpłatna?

Tak — pełny tekst „Jednostki absolutne: px, pt i cm” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu CSS Academy, przejdź na CoddyKit PRO. Kurs CSS Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Jednostki absolutne: px, pt i cm”?

Poznają Państwo, kiedy stosować stałe jednostki absolutne, takie jak piksele, punkty i centymetry. Ćwiczysz CSS Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć CSS Academy?

Nie wymagamy żadnego doświadczenia. CSS Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.

Ile czasu zajmuje lekcja „Jednostki absolutne: px, pt i cm”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji CSS Academy?

Tak. Każda lekcja CSS Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do CSS Academy