È possibile inserire le regole CSS @media in linea?

Question

Ho bisogno di caricare dinamicamente le immagini banner in un'app HTML5 e vorrei un paio di versioni diverse per adattarle alle larghezze dello schermo. Non riesco a determinare correttamente la larghezza dello schermo del telefono, quindi l'unico modo che posso pensare di fare questo è aggiungere immagini di sfondo di un div e usare @media per determinare la larghezza dello schermo e visualizzare l'immagine corretta.

Ad esempio:

<span style="background-image:particular_ad.png; @media (max-width:300px){background-image:particular_ad_small.png;}"></span> 

Questo è possibile, o qualcuno ha altri suggerimenti?

Answer 1

No, @media No, @media le regole e le query dei supporti non possono esistere negli attributi di stile in linea poiché possono contenere solo dichiarazioni property: value. Come the spec lo mette:

Il valore dell'attributo stile deve corrispondere la sintassi dei contenuti di un CSS declaration block

L'unico modo per applicare stili ad un elemento solo in alcuni media è con un regola separata nel tuo foglio di stile, il che significa che dovrai creare un selettore per questo.

Un manichino di selezione span sarebbe simile a questa, ma se ci si rivolge un elemento molto specifico si avrà bisogno di un selettore più specifico:

span { background-image: url(particular_ad.png); } 

@media (max-width: 300px) { 
    span { background-image: url(particular_ad_small.png); } 
}