Partage
  • Partager sur Facebook
  • Partager sur Twitter

Responsive web design

CSS Media Queries

Sujet résolu
    16 février 2020 à 21:55:11

    Hello bonjour

    Voilà, j'ai créer un petit test en responsive, après l'avoir testé dans mon navigateur je constate deux choses. Dans un premier temps je teste en rétrécissant le navigateur dans sa largeur et tout semble fonctionner avec mes trois boutons qui ont chacun 33,3% de largeur dans un conteneur à 100% width, donc jusque là, comme configuré avec un media querie à max 600px width, pas de problèmes.

    Curieusement lorsque je fait un test avec l'inspecteur Chrome ou directement sur mon smartphone les choses se gâtent, je constate avec stupéfaction qu'arrivé à 600px width rien ne se passe...???

    Ca fait plusieurs fois que je vois des gens qui mettent en exemple sur Codepen des barres de navigation sois disant responsives et qui en fait ne le sont pas vraiment, vu qu'ils ont ce mêmes problème...

    Je me demandais donc si il existerait une personne qui pourrait apporté une explication à cette énigme ???

    Mon test sur Codepen

     Merci d'avance pour votre collaboration.

    Cordialement

    -
    Edité par Christian Mottaz 16 février 2020 à 22:40:57

    • Partager sur Facebook
    • Partager sur Twitter
      Staff 17 février 2020 à 7:42:37

      Bonjour,

      il serait intéressant de voir ton code dans son véritable état naturel, avec le <head> et son contenu (je parie qu'il manque une <meta viewport> ^^ : https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag ne pas lire la VF, les exemples sont mauvais).

      Autres points :

      • une image pour h1, ok, mais dans ce cas, remplis son attribut alt avec le texte présent dans l'image
      • width 100% est à éviter si on n'est pas dans le contexte d'une table ou d'un élément flex (surtout avec des margin auto qui ne vont donc servir à rien)
      • pour ta navbar, tu peux utiliser flexbox plutôt que float, c'est conçu pour ça (alors que float pas du tout)
      • Partager sur Facebook
      • Partager sur Twitter
      Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!
        18 février 2020 à 1:16:38

        Bonjour Lara

        Eh oui tu gagne le pari et c'est temps mieux. Effectivement il s'agissait bien de la balise  <meta viewport> ^^ et je te remercie de m'avoir aiguillé.

        Merci encore pour les autres petits conseils que je tacherais d'appliquer et qui me serons fort utile dans un futur proche, j'en suis sure.

        Liens vers ma nouvelle mouture →

        Cordialement

        • Partager sur Facebook
        • Partager sur Twitter

        Responsive web design

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