Problème
Non, les requêtes multimédias ne peuvent pas être utilisées de cette manière
<span style="@media (...) { ... }"></span>
Solution
Mais si vous voulez fournir un comportement spécifique utilisable à la volée ET réactif, vous pouvez utiliser le stylebalisage et non l'attribut.
ei
<style scoped>
.on-the-fly-behavior {
background-image: url('particular_ad.png');
}
@media (max-width: 300px) {
.on-the-fly-behavior {
background-image: url('particular_ad_small.png');
}
}
</style>
<span class="on-the-fly-behavior"></span>
Voir le code en direct sur CodePen
Dans mon blog par exemple, j'injecte un <style>balisage <head>juste après la <link>déclaration pour CSS et il contient le contenu d'une zone de texte fournie à côté de la zone de texte de contenu réel pour créer une classe supplémentaire à la volée lorsque j'ai écrit un article.
Remarque: l' scopedattribut fait partie de la spécification HTML5. Si vous ne l'utilisez pas, le validateur vous en voudra mais les navigateurs ne prennent actuellement pas en charge le véritable objectif: délimiter le contenu de <style>uniquement sur l'élément immédiatement parent et les éléments enfants de cet élément. La portée n'est pas obligatoire si l' <style>élément est en <head>balisage.
MISE À JOUR: Je conseille de toujours utiliser les règles dans le premier mobile, donc le code précédent devrait être:
<style scoped>
/* 0 to 299 */
.on-the-fly-behavior {
background-image: url('particular_ad_small.png');
}
/* 300 to X */
@media (min-width: 300px) { /* or 301 if you want really the same as previously. */
.on-the-fly-behavior {
background-image: url('particular_ad.png');
}
}
</style>
<span class="on-the-fly-behavior"></span>