Suggerimento rapido un corso accelerato nelle query multimediali CSS

In passato, per creare layout basati sulla larghezza del browser dell'utente, dovevamo utilizzare JavaScript, magari combinato con un linguaggio lato server. Fortunatamente, il processo sta diventando molto più semplice, grazie alle query multimediali CSS.

---

Iscriviti alla nostra pagina YouTube per guardare tutti i tutorial video!
Preferisci guardare questo video su Screenr?

---

Metodo 1: all'interno del tuo foglio di stile

 @media screen e (min-width: 1200px) / * facciamo qualcosa di simile * /

---

Metodo 2: importa dal tuo foglio di stile

 @import url (small.css) screen e (min-width: 1200px);

Tieni presente che puoi anche aggiungere regole aggiuntive, applicando una virgola, proprio come faresti quando utilizzi più selettori.

---

Metodo 3: collegamento a un foglio di stile

---

Metodo 4: Targeting per iPhone

Una nota interessante, dopo un po 'di ricerche sul web, è che, nonostante il fatto che l'iPhone 4 abbia una risoluzione di 640x960, continua a riprendere mobile.css, di cui al codice sopra. Che strano? Se si dispone di ulteriori informazioni su questo, si prega di lasciare un commento per il resto di noi!

---

Browser che supportano le query sui supporti CSS

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

Si noti che Internet Explorer 8 e versioni successive non supportano le query multimediali CSS. In questi casi, dovresti utilizzare un fallback JavaScript.