Stap 4: Media Query voor mobiele apparaten
< code >
scherm en (max-width: 481px) {}
/ * schrijven uw CSS-Code hier * /
}
< / code >
' scherm en (max-width: 481px)' definieert de CSS lay-out voor schermformaten met 481px max. (CSS-resolutie) en lager.
Bijvoorbeeld een FullHD smartphone (portretmening) heeft een breedte van 1080 pixels, maar het is niet hetzelfde als de CSS-resolutie.
Om te converteren van de "smartphone pixels" naar "CSS pixels" die je moet overwegen-breedteverhouding van pixels.
Een 1080p-smartphone heeft een pixel-ratio van 3 = > 1080/3 = 360px (CSS-resolutie)
Op wikipedia, er is een lijst van de meest voorkomende mobiele apparaten waarin de resolutie + pixel verhouding:
http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density
Dankzij de testers!
Zodat we een kijkje op de 'screen.css nemen' (attractiepark... / CSS/screen.css) en een media-query met nieuwe definities van de structuur toe te na de bestaande CSS definities voegen.
De andere css-bestanden zijn voor oudere browserversies en voor afdrukken doeleinden.
