Puis-je utiliser une requête média dans CSS interne, et évitera-t-il de charger les images d'arrière-plan que je définis?

Je travaille sur un site responsive où chaque page aura un grand héros de l'image, définie dans le CMS. J'aimerais éviter d'avoir à télécharger que l'image de fond sur les mobiles.

La seule façon que je peux penser à faire c'est d'avoir des CSS dans le head de la page comme ceci:

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

D'abord, puis-je utiliser les media queries en CSS?

Deuxième, ça va éviter le téléchargement de l'image sur les mobiles?

Troisième, est-il un meilleur moyen?

Grâce

source d'informationauteur GusRuss89

  1. 6

    Oui, vous pouvez utiliser des requêtes de média dans un <style> tag. L'image est chargée uniquement si le CSS pour cela il faut, donc, si rien ne correspond au sélecteur, il ne dérange pas le chargement de l'image.

    Il serait probablement préférable d'inclure les médias requête dans votre fichier CSS externe. Il n'y a pas de raison de l'inclure inlline.

  2. 4

    Non, il semble que vous ne pouvez pas inline @media tags:

    Veuillez vous référer à ceci:
    Est-il possible de mettre les CSS @media règles inline?

  3. 1

    Vous pourriez avoir plus de chance avec un deux-étape requête des médias, qui débute en CSS mais qui se termine en jQuery. Étiquette de votre balise div avec un ID donc jQuery peut les trouver. Le processus est expliqué en détail ici: http://www.fourfront.us/blog/jquery-window-width-and-media-queries