web-dev-qa-db-fra.com

Puis-je utiliser une requête multimédia en 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 une grande image de héros, définie dans le CMS. J'aimerais éviter de télécharger cette image de fond sur les mobiles.

La seule façon pour moi de le faire est d’avoir du CSS en ligne en tête de page, comme ceci:

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

Tout d’abord, puis-je utiliser des requêtes multimédia dans des CSS intégrées?

Deuxièmement, cela évitera-t-il de télécharger l'image sur les téléphones mobiles?

Troisièmement, y a-t-il un meilleur moyen?

Merci

html5css3twitter-bootstrapresponsive-designmedia-queries
16
GusRuss89

Oui, vous pouvez utiliser des requêtes multimédia dans une balise <style>. L'image n'est chargée que si le CSS l'exige. Par conséquent, si rien ne correspond au sélecteur, le chargement de l'image ne sera pas dérangé.

Cependant, il serait probablement préférable d’inclure la requête multimédia dans votre fichier CSS externe. Il n'y a aucune raison de l'inclure inlline.

6
Niet the Dark Absol

Non, il semble que vous ne puissiez pas incorporer les tags @media:

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

4
Natalya Hoota

Vous pourriez avoir plus de chance avec une requête multimédia en deux étapes, une qui commence par CSS mais se termine par jQuery. Identifiez vos divs avec un identifiant afin que jQuery puisse les trouver. Le processus est expliqué en détail ici: http://www.fourfront.us/blog/jquery-window-width-and-media-queries

1
Dave Kanter