Informacje o ekranie

DPR to liczba fizycznych pikseli przypadających na jeden piksel CSS. DPR równy 2 wskazuje na ekran Retina, co oznacza, że obrazy powinny być 2 razy większe dla ostrego wyświetlania.

Rozdzielczość ekranu to całkowita liczba fizycznych pikseli monitora, natomiast widok to obszar, w którym treść jest wyświetlana w przeglądarce, z wyłączeniem pasków narzędzi i przewijania.

Przywiązanie punktów granicznych do nazw konkretnych urządzeń gwarantuje, że posypią się z chwilą premiery nowego modelu. Zamiast tego tnij tam, gdzie sam układ zaczyna wyglądać źle. W praktyce 480, 768, 1024 i 1280 px to popularne punkty wyjścia, ale to liczby łatwe do zapamiętania, nie reguły. Powoli zwężaj okno przeglądarki i obserwuj, przy jakiej szerokości wiersze tekstu robią się za długie albo karta się gniecie; punkt graniczny ustawiony właśnie tam przetrwa znacznie dłużej.

Ponieważ piksel CSS to jednostka rozmiaru widzianego, a nie fizyczny punkt. Na ekranie 4K ustawionym na skalowanie 200% 3840 fizycznych punktów prezentowanych jest jako 1920 pikseli CSS i właśnie to sprawia, że tekst oraz ikony wyglądają gęściej i ostrzej. Współczynnik pikseli urządzenia wynosi wtedy 2, więc aby obrazy pozostały ostre, trzeba przez srcset dostarczyć plik o dwukrotnie większej rozdzielczości niż rozmiar wyświetlania.