Px, em czy rem — co podąża za ustawieniami przeglądarki

2026-10-19T09:35:11Z

SheriMoench681: Utworzono nową stronę "Zacznij od ustawienia bazowego rozmiaru na elemencie głównym, czyli html. Wpisanie tam wartości procentowej lub jednostki rem sprawia, że cała strona respektuje wybór użytkownika. Dopiero potem nadawaj rozmiary poszczególnym elementom. Jeśli bazę ustawisz w pikselach, odcinasz użytkownika od jego preferencji — powiększanie czcionki w przeglądarce przestaje działać na korzyść tekstu. To najczęstszy błąd przy przepisywaniu projektu na jednostki…"

Zacznij od ustawienia bazowego rozmiaru na elemencie głównym, czyli html. Wpisanie tam wartości procentowej lub jednostki rem sprawia, że cała strona respektuje wybór użytkownika. Dopiero potem nadawaj rozmiary poszczególnym elementom. Jeśli bazę ustawisz w pikselach, odcinasz użytkownika od jego preferencji — powiększanie czcionki w przeglądarce przestaje działać na korzyść tekstu. To najczęstszy błąd przy przepisywaniu projektu na jednostki względne. Praktyczna różnica jest też w tym, co zagnieżdżenie komunikuje czytnikom ekranu i wyszukiwarkom. article wewnątrz article oznacza zwykle komentarz pod wpisem — i to jest poprawne. Natomiast section wewnątrz section bez nagłówka to prawie zawsze błąd: fragment bez tytułu trudno zidentyfikować, więc lepiej użyć zwykłego div z klasą. Przy obrazach, które są linkami, alt musi opisywać cel linku, a nie wygląd grafiki. Jeśli kliknięcie w ikonę kosza usuwa element, alt powinien brzmieć „usuń", a nie „ikona kosza". Przy przyciskach z samą grafiką to szczególnie ważne, bo czytnik odczyta właśnie alt. Gdy obraz jest złożony — wykres, mapa, schemat — krótki alt nie wystarczy. Wtedy podaj zwięzły alt i rozbudowany opis w tekście obok albo w atrybucie longdesc, jeśli technologia go obsługuje. Nie zostawiaj użytkownika z samym „wykres". Uwaga na media queries. W zapytaniach o szerokość okna jednostki em i rem zachowują się inaczej, niż się oczekuje — em w media query odnosi się do rozmiaru czcionki ustawionego w przeglądarce, nie do elementu. Mieszanie tych jednostek w warunkach responsywności prowadzi do progów, które przesuwają się u użytkowników z powiększoną czcionką. Bezpieczniej trzymać się jednej konwencji w całym arkuszu i zapisać ją w komentarzu na górze pliku. Kiedy article trafia do section, a kiedy section do article Najprostsza zasada: pytaj, czy dany blok ma sens poza resztą strony. Jeśli tak — to article. Jeśli nie — section. Zagnieżdżenie article w section stosujesz na przykład na stronie kategorii: section grupuje listę wpisów, a każdy wpis to osobny article. Odwrotnie, section w article użyjesz we wpisie blogowym, gdzie wydzielasz sekcję „Wnioski" albo „Przykłady" wewnątrz jednego artykułu. Kiedy wektor wygrywa, a kiedy nie ma wyjścia Wektor sprawdza się wszędzie tam, gdzie liczą się ostre krawędzie: logotypy, ikony, wykresy, schematy, typografia. Taki plik można powiększyć do rozmiaru billboardu i nadal będzie miał idealnie gładkie linie. Ograniczenie jest jedno — wektor nie opisze fotografii. Zdjęcia pozostają rastrowe i przy dużym powiększeniu zawsze stracą jakość. Wyjściem jest zdobycie pliku źródłowego w wyższej rozdzielczości, ponowne wykonanie zdjęcia w lepszej jakości albo użycie narzędzi do skalowania opartych na uczeniu maszynowym. To ostatnie bywa skuteczne przy niewielkich powiększeniach, ale przy dużych rozmiarach nadal generuje artefakty. Elementy section i article w HTML5 wyglądają podobnie, ale mają różne znaczenie. article to samodzielna treść, która ma sens także po wyjęciu z kontekstu strony — wpis na blogu, komentarz, karta produktu. section to fragment większej całości, który samodzielnie nie byłby kompletny — rozdział, grupa akapitów, panel z powiązanymi informacjami. Problem pojawia się, gdy trzeba je zagnieździć i nie wiadomo, co włożyć w co. Rem nie ma tego problemu, bo zawsze odnosi się do elementu html, niezależnie od głębokości. Ustawienie 1.5rem da ten sam efekt na pierwszym i na dziesiątym poziomie drzewa. To czyni rem domyślnym wyborem dla typografii: nagłówków, akapitów, przycisków. Praktyczna zasada: rozmiar tekstu w rem, odstępy i marginesy w rem, a em tylko tam, gdzie proporcja wobec lokalnego kontekstu jest zamierzona. Nagłówki kolumn można dodatkowo opisać atrybutem scope. Wartość scope="col" mówi, że dana komórka th opisuje całą kolumnę, a scope="row" — cały wiersz. Dzięki temu technologie asystujące lepiej wiążą nagłówek z danymi. To prosty zabieg, który nie zmienia wyglądu, ale realnie poprawia jakość tabeli. Przy przygotowaniu do druku pamiętaj o rozdzielczości docelowej. Dla materiałów oglądanych z bliska potrzeba znacznie więcej pikseli na cal niż dla wielkoformatowych banerów widzianych z kilku metrów. Zaniżona rozdzielczość to najgorszy scenariusz — plik wygląda dobrze na ekranie, a na wydruku ujawnia wszystkie wady. Zawsze potwierdź wymagania u wykonawcy przed rozpoczęciem pracy, nie po. Zmiana rozmiaru w trakcie projektu oznacza powtórzenie całego procesu. Każdy obraz cyfrowy to albo siatka pikseli, albo opis matematyczny. Różnica wychodzi na jaw dopiero wtedy, gdy trzeba powiększyć grafikę do dużego formatu. Plik rastrowy ma stałą liczbę pikseli. Gdy rozciągniesz go na wielkość banera, program musi zgadywać, czym wypełnić brakujące piksele. Wektor opisuje kształty równaniami, więc skaluje się bez utraty jakości. Zrozumienie tej różnicy oszczędza godziny pracy i pieniądze wydane na wydruki do poprawki.

Użytkownik:SheriMoench681

2026-10-19T09:35:10Z

SheriMoench681: Utworzono nową stronę "Miłośnik praktycznego designu na co dzień. Dzielę się tym, jak wycisnąć maksimum z małego metrażu. Najchętniej opisuję zmiany, które widać od pierwszego dnia."

Miłośnik praktycznego designu na co dzień. Dzielę się tym, jak wycisnąć maksimum z małego metrażu. Najchętniej opisuję zmiany, które widać od pierwszego dnia.

Mazovia - Wkład użytkownika [pl]

Px, em czy rem — co podąża za ustawieniami przeglądarki

Użytkownik:SheriMoench681