Skærminfo

DPR er antallet af fysiske pixels pr. CSS-pixel. En DPR på 2 indikerer en Retina-skærm, hvilket betyder, at billeder bør være 2 gange større for en skarp visning.

Skærmopløsning er det samlede antal fysiske pixels på din skærm, mens viewport er det område, hvor indhold vises i browseren, eksklusive værktøjslinjer og rullepaneler.

At binde brydepunkter til bestemte enhedsnavne garanterer, at de knækker, så snart en ny model udkommer. Klip i stedet dér, hvor selve layoutet begynder at se forkert ud. I praksis er 480, 768, 1024 og 1280 px almindelige udgangspunkter, men det er tal, der er lette at huske, ikke regler. Træk browservinduet langsomt smallere, og hold øje med den bredde, hvor tekstlinjerne bliver for lange, eller et kort mases sammen; et brydepunkt placeret netop dér holder langt længere.

Fordi en CSS-pixel er en enhed for opfattet størrelse, ikke en fysisk prik. På en 4K-skærm indstillet til 200 % skalering vises 3840 fysiske prikker som 1920 CSS-pixels, og netop det får tekst og ikoner til at se tættere og skarpere ud. Enhedens pixelforhold er da 2, så for at holde billederne skarpe skal du via srcset levere en fil i dobbelt visningsstørrelse.