Info schermo

Il DPR è il numero di pixel fisici per pixel CSS. Un DPR di 2 indica un display Retina, il che significa che le immagini dovrebbero essere 2 volte più grandi per una visualizzazione nitida.

La risoluzione dello schermo è il totale dei pixel fisici del tuo monitor, mentre il viewport è l'area in cui il contenuto viene visualizzato nel browser, escludendo barre degli strumenti e barre di scorrimento.

Ancorare i breakpoint a nomi di dispositivi precisi garantisce che si rompano appena esce un modello nuovo. Taglia piuttosto dove è il layout stesso a cominciare a sembrare sbagliato. In pratica 480, 768, 1024 e 1280 px sono punti di partenza comuni, ma sono numeri facili da ricordare, non regole. Restringi lentamente la finestra del browser e osserva a quale larghezza le righe di testo si allungano troppo o una scheda si schiaccia: mettere lì il breakpoint dura molto di più.

Perché il pixel CSS è un'unità di dimensione apparente, non un punto fisico. Su uno schermo 4K con scalatura al 200%, 3840 punti fisici vengono presentati come 1920 pixel CSS, ed è proprio ciò che rende testo e icone più fitti e nitidi. Il rapporto pixel del dispositivo diventa allora 2, quindi per mantenere nitide le immagini devi fornire tramite srcset un file al doppio della dimensione visualizzata.