Gör din HTML-webbplats lämplig för rörlig anordningen (4 / 8 steg)
Steg 4: Media frågan för mobila enheter
< code >
skärmen och (max bredd: 481px) {
/ * skriva din CSS-koden här * /
}
< / code >
"skärmen och (max bredd: 481px)" definierar CSS-layouten för skärmstorlek med 481px max. (CSS upplösning) och nedan.
Till exempel en FullHD smartphone (stående format) har en bredd av 1080 pixlar, men det är inte samma som i CSS-resolutionen.
För att omvandla de "smartphone pixlarna" till "CSS pixlar" måste du överväga förhållandet pixel.
En 1080p smartphone har en pixel på 3 = > 1080/3 = 360px (CSS-upplösning)
På wikipedia finns en lista över de vanligaste mobila enheterna som visar den resolution + pixel förhållande:
http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density
Tack till testare!
Så vi tar en titt på "screen.css" (som finns i... / CSS/screen.css) och lägga till en media fråga med nya strukturdefinitioner efter de befintliga CSS definitionerna.
Andra css-filer är för äldre webbläsarversioner och för grafiskt ändamål.