Table des matières:
- 1Cliquez sur le bouton Requêtes média.
- 2Dans la zone Écrire des requêtes multimédias sur, sélectionnez Ce document (pour définir la requête multimédia pour le document ouvert).
- 3Cliquez sur la case Forcer les périphériques à reporter la largeur réelle.
- 4Cliquez sur le ?? + ?? bouton pour générer la première requête multimédia. Dans la zone Description, entrez un commentaire qui vous rappelle à quoi sert cette requête (ordinateurs portables, tablettes, appareils mobiles, etc.).
- 5Pour définir une largeur minimale pour la requête multimédia, entrez une valeur dans la zone Largeur minimale.
- 6Cliquez sur le bouton Utiliser un fichier existant et naviguez jusqu'au fichier CSS que vous souhaitez utiliser dans les environnements de navigateur en taille réelle.
- 7Définissez au moins une requête média supplémentaire en répétant les étapes 4 à 6.
- 8Cliquez sur OK dans la boîte de dialogue Requêtes multimédias.
Vidéo: Tutoriel Dreamweaver CC : Découvrir la palette visuelle de requêtes médias | video2brain.com 2025
Media Query identifie un média (impression, écran, périphérique de poche, etc.) et affiche la page HTML avec une feuille de style CSS basée sur ce support. Ainsi, par exemple, si la page est ouverte sur un appareil mobile Android, elle s'affichera avec un conteneur plus étroit pour s'adapter au téléphone et un jeu de couleurs à contraste supérieur qui fonctionnera bien au soleil.
Avec vos autres fichiers CSS créés et enregistrés, affichez la page HTML à laquelle ils seront liés dans la fenêtre Aperçu multi-écrans. Pour créer une requête multimédia dans Dreamweaver, procédez comme suit:
1Cliquez sur le bouton Requêtes média.
La boîte de dialogue Media Queries s'ouvre.
2Dans la zone Écrire des requêtes multimédias sur, sélectionnez Ce document (pour définir la requête multimédia pour le document ouvert).
Pour générer un fichier Media Queries applicable à d'autres pages de votre site Dreamweaver, sélectionnez l'option Site Wide Media Queries File, puis cliquez sur le bouton Specify pour rechercher et sélectionner un dossier et un nom de fichier à cet effet.
3Cliquez sur la case Forcer les périphériques à reporter la largeur réelle.
Une étiquette spéciale est insérée qui produit des valeurs de largeur plus précises à partir des médias interrogés.
4Cliquez sur le ?? + ?? bouton pour générer la première requête multimédia. Dans la zone Description, entrez un commentaire qui vous rappelle à quoi sert cette requête (ordinateurs portables, tablettes, appareils mobiles, etc.).
Par exemple, si vous définissez un style à utiliser sur les ordinateurs de bureau et les ordinateurs portables, vous pouvez le définir comme Ordinateurs de bureau et Ordinateurs portables.
5Pour définir une largeur minimale pour la requête multimédia, entrez une valeur dans la zone Largeur minimale.
Une bonne largeur minimale pour les mises en page en plein écran est de 960 pixels.
6Cliquez sur le bouton Utiliser un fichier existant et naviguez jusqu'au fichier CSS que vous souhaitez utiliser dans les environnements de navigateur en taille réelle.
Cette figure illustre cette première requête multimédia définie.
7Définissez au moins une requête média supplémentaire en répétant les étapes 4 à 6.
Par exemple, si vous avez un fichier CSS pour tablettes et smartphones, faites-en votre deuxième option et définissez une largeur maximale de 959 pixels.
8Cliquez sur OK dans la boîte de dialogue Requêtes multimédias.
Vous revenez à la fenêtre Aperçu multiscreen dans laquelle vous pouvez voir à quoi ressemblera votre page dans les périphériques pour lesquels vous avez défini une requête multimédia.
