Posso utilizzare una query multimediale in CSS interno e eviterò di caricare le immagini di sfondo che definisco?

Question

Sto lavorando a un sito reattivo in cui ogni pagina avrà un'immagine di eroe di grandi dimensioni, definita nel CMS. Mi piacerebbe evitare di dover scaricare quell'immagine di sfondo sui cellulari.

L'unico modo che posso pensare di farlo è quello di avere un po 'di CSS in linea nella testa della pagina in questo modo:

<style type="text/css"> 
    @media only screen and (min-width: 680px) { 
     .hero-image { background-image: url(../images/image.jpg); } 
    } 
</style> 

In primo luogo, posso usare media query in CSS in linea?

In secondo luogo, si eviterà di scaricare l'immagine sui telefoni cellulari?

In terzo luogo, c'è un modo migliore?

Grazie

Answer 1

Sì, è possibile utilizzare le query di media in un tag <style>. L'immagine viene caricata solo se il CSS lo richiede, quindi se nulla corrisponde al selettore, non si preoccuperà di caricare l'immagine.

Sarebbe probabilmente meglio includere la query multimediale nel file CSS esterno, comunque. Non c'è motivo di includerlo inlline.

Answer 2

No, sembra che non si può in linea tag @media:

Si prega di fare riferimento a questo: Is it possible to put CSS @media rules inline?

Answer 3

Si potrebbe avere più fortuna con una media query in due fasi, quella che inizia nel CSS, ma finisce in jQuery. Etichetta i tuoi div con un ID così jQuery può trovarli. Il processo è spiegato in dettaglio qui: http://www.fourfront.us/blog/jquery-window-width-and-media-queries