Partage
  • Partager sur Facebook
  • Partager sur Twitter

Media Queries

Découverte de Media Queries

Sujet résolu
    23 juin 2022 à 17:27:09

    Bonjour à tous, 

    Je découvre media queries et je me pose donc une question pour être sûre d'avoir bien compris.

    Donc si je souhaite développer un site qui s'adaptera à 3 types d'écran donc ecran pc, tablette et mobile.

    Pour chaque type j'ai donc une taille défini. 

    Si j'ai bien compris je devrais alors dans mon css avoir 3 media queries et pour chacun alors recopier le css en adaptant ce que je souhaite qui soit adapté ? Est ce exacte ?

    Ou bien dois créer 3 fichier css, 1 pour chaque media querie ?

    Merci beaucoup pour votre aide !

    Bonne journée

    • Partager sur Facebook
    • Partager sur Twitter
      24 juin 2022 à 0:56:27

      Bonjour.

      Les tailles (définitions) d'écran ne sont pas vraiment définies. Elles sont plutôt dans une fourchette, un intervalle.

      Tu n'a qu'un seul fichier CSS à faire, dans lequel tu peux définir toutes tes règles.

      Ensuite, grâce aux média queries, tu pourras ajuster certains formatages pour les adapter à des définitions moindres.

      Par exemple, tu peux te permettre pour un grand écran de décider :

      body {padding:20px}

      Mais pour un écran de smartphone, dont la largeur est de 600px, c'est un gaspillage qui t'empêche d'avoir des colonnes de texte de plus de quelques mots de large.

      Tu peux donc diminuer ce padding via une media query

      @media (max-width: 500px){
        body {padding: 6px}
      }


      Cordialement

      -
      Edité par Domi65 24 juin 2022 à 0:57:10

      • Partager sur Facebook
      • Partager sur Twitter
        24 juin 2022 à 8:41:18

        D'accord merci pour cette réponse, donc si je comprends bien en suivant votre exemple. Alors je dois mettre dans les media queries uniquement pour les éléments non compatible à tous les écrans ce qu'il faut donc adapter à chacun, mais le reste du code css ne doit pas être mis entre media queries, il reste général. Est ce exact ?

        Merci !

        • Partager sur Facebook
        • Partager sur Twitter
          24 juin 2022 à 15:59:25

          Bonjour,

          Plusieurs solutions possibles mais une approche souvent rencontrée est celle du "Mobile First" qui consiste à commencer par la taille d'écran la plus petite (mobile). Avec cette approche, tu peux commencer par écrire tout le CSS pour la version mobile de ton site sans media query, puis utiliser les media queries pour ajouter ou surcharger le code CSS pour les écrans plus larges.

          • Partager sur Facebook
          • Partager sur Twitter
            26 juin 2022 à 18:55:23

            D’accord parfait merci ! 😄
            • Partager sur Facebook
            • Partager sur Twitter

            Media Queries

            × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
            • Editeur
            • Markdown