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

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

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 !

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.