För att skapa layouter baserat på bredden på användarens webbläsare, var vi tvungna att använda JavaScript - kanske kombinerat med ett språk på serversidan. Lyckligtvis blir processen nu mycket enklare tack vare CSS-mediafrågor.
@media skärm och (min bredd: 1200px) / * låt oss göra någonting '* /
@import url (small.css) skärm och (min bredd: 1200px);
Observera att du också kan lägga till tilläggsregler genom att använda ett komma - ungefär som du skulle när du använder flera väljare.
En intressant anteckning, efter lite forskning på nätet, är det, trots att iPhone 4 sportar en upplösning på 640x960, det tar vi fortfarande upp mobile.css
, refererad i koden ovan. Hur konstigt? Om du har mer information om detta, vänligen lämna en kommentar till resten av oss!
Observera att Internet Explorer 8 och senare inte stöder CSS-mediefrågor. I sådana fall borde du använda en JavaScript-återgång.