Vous pouvez utiliser des requêtes multimédias pour spécifier des fichiers CSS suivant les caractéristiques indiquées pour un appareil (conception réactive). Le navigateur d’un appareil vérifie la requête multimédia, puis utilise le fichier CSS correspondant pour afficher la page web.

Par exemple, la requête multimédia suivante spécifie le fichier phone.css pour les appareils de 300 à 320 pixels de large.

<link href="css/orig/phone.css" rel="stylesheet" type="text/css" media="all and (min-width: 300px) and (max-width: 320px)">

Vous trouverez une présentation détaillée des requêtes multimédias dans l’article de Don Booth sur le Pôle de développement Adobe, à l’adresse www.adobe.com/go/learn_dw_medquery_don_fr.

Pour plus d’informations sur les requêtes multimédias sur le site du W3C, voir www.w3.org/TR/css3-mediaqueries/.

Création d’une requête multimédia

Sous Dreamweaver, vous pouvez créer un fichier de requêtes multimédias à l’échelle du site ou une requête multimédia spécifique au document.

Fichier de requêtes multimédias à l’échelle du site

Spécifie les paramètres d’affichage de toutes les pages de votre site qui comprennent ce fichier.

Le fichier de requêtes multimédias à l’échelle du site fait office de dépôt central pour toutes les requêtes multimédias dans votre site. Après avoir créé ce fichier, créez un lien vers celui-ci à partir des pages de votre site qui doivent utiliser les requêtes multimédias du fichier pour leur affichage.

Requête multimédia spécifique au document

La requête multimédia est insérée directement dans le document et la page s’affiche en fonction de la requête multimédia insérée.

  1. Créez une page web.

  2. Choisissez Modifier > Requêtes multimédias.

  3. Effectuez l’une des opérations suivantes :

    • Pour créer un fichier de requête multimédia à l’échelle du site, choisissez Fichier de requête multimédia à l’échelle du site.

    • Pour créer une requête multimédia propre au document, choisissez Ce document.

  4. Pour une requête multimédia à l’échelle du site, procédez comme suit :

    1. Cliquez sur Spécifier.

    2. Choisissez Créer un nouveau fichier.

    3. Indiquez le nom du fichier, puis cliquez sur OK.

  5. Il se peut que certains appareils ne communiquent pas leur largeur réelle. Pour forcer les appareils à communiquer leur largeur réelle, assurez-vous que l’option Forcer les appareils à communiquer leur largeur réelle est activée.

    Lorsque vous sélectionnez cette option, le code suivant est inséré dans votre fichier.

    <meta name="viewport" content="width=device-width">
  6. Effectuez l’une des opérations suivantes :

    • Cliquez sur « + » pour définir les propriétés du fichier de requêtes multimédias.

    • Cliquez sur Paramètres prédéfinis par défaut si vous souhaitez commencer avec des paramètres prédéfinis.

  7. Sélectionnez les lignes du tableau et modifiez leurs propriétés à l’aide des options de la section Propriétés.

    Description

    Description de l’appareil pour lequel le fichier CSS doit être utilisé. Par exemple, téléphone, téléviseur, tablette, etc.

    Largeur min et Largeur max

    Le fichier CSS est utilisé pour les appareils dont la largeur communiquée figure dans la plage de valeurs spécifiées.

    Remarque :

    laissez la valeur Largeur min ou Largeur max vide si vous ne souhaitez pas spécifier une plage explicite pour un appareil. Par exemple, il est courant de laisser Largeur min vide si vous travaillez pour des téléphones, qui font 320px de large ou moins.

    Fichier CSS

    Sélectionnez l’option Utiliser fichier existant et localisez le fichier CSS pour l’appareil.

    Si vous souhaitez spécifier un fichier CSS que vous devez encore créer, sélectionnez Créer un nouveau fichier. Entrez le nom du fichier CSS. Le fichier est créé lorsque vous cliquez sur le bouton OK.

  8. Cliquez sur OK.

  9. Pour une requête multimédia à l’échelle du site, un nouveau fichier est créé. Enregistrez-le.

Requête multimédia à l’échelle du site : pour les pages existantes, veillez à inclure le fichier de requêtes multimédias dans la balise <head> de toutes les pages.

Exemple de lien de requêtes multimédias où mediaquery_adobedotcom.css est le fichier de requêtes multimédias à l’échelle du site pour le site www.adobe.com/fr :

<link href="mediaquery_adobedotcom.css" rel="stylesheet" type="text/css">

Utilisation d’un fichier de requêtes multimédias existant

  1. Créez une page ou ouvrez une page existante.

  2. Choisissez Modifier > Requêtes multimédias.

  3. Choisissez Fichier de requêtes multimédias à l’échelle du site.

  4. Cliquez sur Spécifier.

  5. Choisissez l’option Utiliser fichier existant si vous avez déjà créé un fichier CSS avec la requête multimédia.

  6. Cliquez sur l’icône Parcourir pour atteindre le fichier et le spécifier. Cliquez sur OK.

  7. Choisissez Fichier de requêtes multimédias à l’échelle du site.

  8. Pour forcer les périphériques à communiquer leur largeur réelle, assurez-vous que l’option Forcer les périphériques à communiquer leur largeur réelle est activée. Le code suivant est inséré dans votre fichier lorsque vous sélectionnez cette option.

    <meta name="viewport" content="width=device-width">
  9. Cliquez sur OK.

Choix d’un autre fichier de requêtes multimédias à l’échelle du site

Cette procédure permet de changer le fichier de requêtes multimédias à l’échelle du site que vous avez défini dans la boîte de dialogue Requêtes multimédias.

  1. Choisissez Site > Gérer les sites.

  2. Dans la boîte de dialogue Gérer les sites, sélectionnez votre site.

  3. Cliquez sur Édition. La boîte de dialogue Configuration du site s’affiche.

  4. Sous Paramètres avancés dans le panneau de gauche, sélectionnez Infos locales.

  5. Dans la section Fichier de requêtes multimédias à l’échelle du site du panneau de droite, cliquez sur Parcourir pour sélectionner le fichier CSS de requêtes multimédias.

    Remarque :

    le changement de fichier de requêtes multimédias à l’échelle du site n’a aucune incidence sur les documents liés à un fichier de requêtes multimédias à l’échelle du site différent ou précédent.

  6. Cliquez sur Enregistrer.

Affichage de pages web à partir d’une requête multimédia

Les dimensions spécifiées dans une requête multimédia apparaissent dans les options Taille de bouton/fenêtre écrans multiples. Lorsque vous sélectionnez une dimension dans le menu, les changements suivants peuvent être observés :

  • La taille de l’affichage change pour refléter les dimensions spécifiées. La taille du cadre du document n’est pas modifiée.

  • Le fichier CSS spécifié dans la requête multimédia est utilisé pour afficher la page.

Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne