Snabb Tips En Crash-kurs i CSS Media Queries

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.



Prenumerera på vår YouTube-sida för att titta på alla videohandledning!
Föredrar att se den här videon på Screenr?

Metod 1: Inom ditt stilark

 @media skärm och (min bredd: 1200px) / * låt oss göra någonting '* /

Metod 2: Importera från ditt stilark

 @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.


Metod 3: Länk till ett stilark

 

Metod 4: Targeting iPhone

 

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!


Webbläsare som stöder CSS Media Queries

  • Firefox 3.5+
  • Opera 9.5+
  • Safari 3+
  • Krom
  • Internet Explorer 9+

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.