Est-il possible de mettre des règles CSS @media en ligne?

Question

Je dois charger de manière dynamique des images de bannière dans une application HTML5 et j'aimerais plusieurs versions différentes pour s'adapter à la largeur de l'écran. Je ne peux pas déterminer correctement la largeur de l'écran du téléphone. La seule façon pour moi de le faire est d'ajouter un arrière-plan. images d'un div et utilisez @media pour déterminer la largeur de l'écran et afficher la bonne image ...

Par exemple

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

Est-ce possible? Ou quelqu'un a-t-il d'autres suggestions?

Answer 1

Non, @media règles et les requêtes multimédias ne peuvent pas exister dans les styles en ligne. La seule façon d'appliquer des styles à un élément dans certains médias est d'utiliser une règle distincte dans votre feuille de style, ce qui signifie que vous devez créer un sélecteur pour ce dernier.

Un sélecteur factice span ressemblerait à ceci:

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

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

Answer 2

Les styles en ligne ne peuvent pas contenir autre chose que des déclarations (paires property: value ).

Vous pouvez utiliser les éléments style avec les attributs appropriés media dans la section head de votre document.

Answer 3

J’ai essayé de tester cela et il ne semble pas fonctionner, mais je suis curieux de savoir pourquoi Apple s’en sert. J’étais juste sur https://linkmaker.itunes.apple.com/us/ et remarqué dans le code généré, qu'il prévoit que si vous sélectionnez la case d’option « Gros bouton », ils utilisent une requête de média en ligne.

Remarque : ajouté code sauts de ligne pour la lisibilité, originale générées est minimisé

Answer 4

Inline médias requêtes sont possibles en utilisant quelque chose comme un point d'arrêt pour Sass

Ce blog fait un bon travail en expliquant la façon dont les media queries sont plus faciles à gérer que les blocs distincts: Il n'y a Pas de point d'arrêt

Liées aux commandes de requêtes de média est l'idée de "l'élément de requêtes", quelques intéressantes lectures sont:

1. Réflexions sur les Media Queries pour les Éléments
2. Les Media Queries sont un Hack
3. Les Media Queries Ne Sont Pas La Réponse: Élément De La Requête Polyfill
4. si d'autre blocs