Gdy mieszasz px, em i rem, układ rozjeżdża się przy zmianie czcionki
Praktyczny wybór wygląda tak: rozmiary tekstu i odstępy w rem, odstępy wewnątrz komponentu w em, a piksele zostaw dla obramowań, cieni i elementów, które naprawdę nie mają rosnąć z tekstem. Jeśli chcesz sprawdzić, czy układ jest odporny, ustaw w przeglądarce domyślną czcionkę na bardzo dużą i przejrzyj stronę. Wszystko, co się rozjeżdża, zdradza, gdzie jednostki zostały pomieszane.<br>
<br>
<br>
<br>
Osobna kategoria problemów to pliki generowane przez narzędzia. Niektóre zapisują index.html z odwołaniami do modułów i wymagają uruchomienia przez lokalny serwer. Dwuklik pokaże pustą stronę albo błąd w konsoli, mimo że kod jest poprawny. Wtedy trzeba skorzystać z prostego serwera uruchamianego w katalogu projektu — to jedyna różnica między otwarciem pliku a uruchomieniem strony w warunkach zbliżonych do produkcyjnych.<br>
<br>
<br>
<br>
Kluczowa rzecz: flex-basis działa tylko na bezpośrednich dzieciach kontenera flex. Jeśli ustawisz procent na wnuku, który nie jest elementem flex, nic się nie stanie. Drugi warunek: rodzic musi mieć określoną szerokość lub wysokość, bo procent z niczego nie policzy się poprawnie. Gdy rodzic jest elementem inline, ma width: auto albo jego rozmiar zależy tylko od zawartości, procent może zostać zignorowany lub policzony w nieprzewidywalny sposób. Najprostsze zabezpieczenie to nadanie rodzicowi konkretnej szerokości, max-width albo display: flex z określonym rozmiarem.<br>
<br>
<br>
<br>
Typowe pomyłki wynikają z mieszania separatorów. W systemach uniksowych działa ukośnik /, w systemie Windows historycznie używano odwrotnego \. W kodzie stron i arkuszy stylów używaj wyłącznie ukośnika zwykłego — odwrotny bywa interpretowany jako znak ucieczki i psuje całą ścieżkę. Uważaj też na wielkość liter: serwery produkcyjne często działają na systemach wrażliwych na wielkość, więc Logo.png i logo.png to dwa różne pliki. Lokalnie na Windows może działać, a po wdrożeniu link przestanie trafiać.<br>
<br>
<br>
<br>
Selektor znacznika celuje we wszystkie elementy danego typu, na przykład akapity albo listy. Zapis jest krótki i nie wymaga dopisywania niczego w HTML-u. Problem pojawia się, gdy ten sam znacznik pełni na stronie różne role — wtedy jedna reguła zaczyna wpływać na miejsca, których wcale nie chciałeś ruszać. To najczęstsze źródło sytuacji, w której poprawka w jednym miejscu psuje układ w trzech innych.<br>
<br>
<br>
<br>
Rozmiar czcionki można zapisać na trzy sposoby i każdy z nich zachowuje się inaczej, gdy użytkownik powiększy tekst w przeglądarce albo zmieni domyślne ustawienia systemu. Pixel (px) to wartość bezwzględna, oderwana od preferencji czytelnika. Em i rem to jednostki relatywne, ale odnoszą się do różnych punktów odniesienia. Zanim wybierzesz jedną z nich, ustal, co ma się skalować razem z czym.<br>
<br>
<br>
<br>
Kiedy alt ma być pusty, a kiedy go nie używa<br>
<br>
<br>
<br>
Em liczy się od rodzica, rem od korzenia Em odnosi się do rozmiaru czcionki elementu nadrzędnego. To wygodne przy przyciskach i odstępach wewnątrz komponentu, bo padding i margin w em rosną razem z tekstem przycisku. Uwaga na pułapkę zagnieżdżania: jeśli rodzic ma font-size: 1.2em, a dziecko też 1.2em, rozmiar dziecka liczy się od rozmiaru rodzica, nie od bazy. Trzy poziomy zagnieżdżenia i tekst puchnie niekontrolowanie. To klasyczny błąd przy listach zagnieżdżonych i akordeonach.<br>
<br>
<br>
<br>
Link do pliku leżącego w innym katalogu działa tylko wtedy, gdy ścieżka jest poprawnie zbudowana względem miejsca, z którego odwołanie jest czytane. Najczęstszy błąd to traktowanie ścieżki względnej jak adresu bezwzględnego — czyli wpisanie czegoś w rodzaju images/logo.png w pliku, który sam leży w podkatalogu. Wtedy przeglądarka szuka folderu images wewnątrz tego podkatalogu, a nie w katalogu głównym projektu. Zanim cokolwiek poprawisz, ustal, gdzie fizycznie znajduje się plik źródłowy i plik docelowy.<br>
<br>
<br>
<br>
Typowy błąd to mieszanie systemów w jednym komponencie. Karta ma padding w pikselach, nagłówek w rem, a opis w em — przy powiększeniu czcionki elementy rozjeżdżają się względem siebie i tekst wychodzi poza tło. Drugi częsty problem to ustawianie font-size w pikselach na kontenerze, a potem używanie em w środku: wtedy em dziedziczy wartość w pikselach i cała relatywność przestaje działać. Trzeci błąd to zerowanie bazy przez font-size: 10px na html, żeby łatwo liczyć remy — psuje to preferencje osób, które powiększyły tekst w systemie.<br>
<br>
<br>
<br>
Rem odnosi się zawsze do rozmiaru czcionki elementu głównego, czyli do tego, co ustawisz na selektorze html. Dzięki temu 2rem znaczy dokładnie to samo w każdym miejscu dokumentu, niezależnie od zagnieżdżenia. To czyni rem przewidywalnym do typografii, nagłówków i odstępów między sekcjami. Praktyczna zasada: ustaw bazę na html font-size: 100% , a konkretne rozmiary opisuj w rem. Wtedy zmiana jednej wartości przeskalowuje cały interfejs.<br>
<br>
<br>
<br>
Piksel jest stały. Jeśli ustawisz font-size: 16px na elemencie głównym, to powiększenie tekstu w przeglądarce zadziała, bo przeglądarki skalują całą stronę. Problem pojawia się wtedy, gdy użytkownik zmieni domyślny rozmiar czcionki w systemie albo w ustawieniach przeglądarki — wtedy tekst zapisany w pikselach zostanie taki sam, a otoczenie wokół niego nie. To najczęstsza przyczyna sytuacji, w której ktoś powiększa czcionkę, a interfejs nadal ma mikroskopijne napisy.