Question sur la responsive des sites web

Résolu
flexi2202 Messages postés 3640 Date d'inscription   Statut Membre Dernière intervention   -  
flexi2202 Messages postés 3640 Date d'inscription   Statut Membre Dernière intervention   -
bonjour a tous
je viens depuis peu de temps découvrir le responsive
j avoue que cela m impressionne de voir son site s adapter suivant le format
alors je me pose déjà la question de savoir comment faire pour être compatible avec tous les écrans
sur une page web
j ai découvert ceci 
@media screen and (max-width:999px) { /*L'écran est inférieur à 999px de large. Ainsi de suite...*/ }
@media screen and (max-width:768px) { }
@media screen and (max-width:480px) { }


es ce assez pour être compatible avec tout le monde ?

ensuite viens ma deuxième question
sur ces exemple lequel est le mieux
car il y a des exemples
ou seul la largeur bouge
d autres ou cela est la largeur et la hauteur
d autres ou les blocs ce placent les uns sous les autres

https://codepen.io/mo2l/pen/vaJdxN
https://codepen.io/benpearson/pen/EiroI
https://codepen.io/rolandjohansson/pen/WMayNY
https://codepen.io/gabriel-forti/pen/KBdWmW
https://codepen.io/micahgodbolt/pen/FgqLc

et enfin la troisième question comment tester sur tous les écrans avec de mettre le site en ligne

merci de l aide

8 réponses

  1. Utilisateur anonyme
     
    Bonjour,
    Les différentes résolutions tentent de prendre en compte les tailles les plus répandues : smartphone, tablette, phablettes etc.

    En indiquant plusieurs déclarations, le css choisi (@media) sera fonction des cacarctéristiques du matériel.

    Les blocs les uns sous les autres, c'est pratique pour avoir une pleine largeur sur un smartphone tenu dans la position habituelle : il n'y a pas de norme imposée mais des habitudes, des conventions de présentation.

    De nombreux tutos ou courts sont disponibles sur le net :
    https://developer.mozilla.org/fr/docs/Apprendre/CSS/CSS_layout/Responsive_Design
    https://www.alsacreations.com/article/lire/1615-cest-quoi-le-responsive-web-design.html
    https://www.w3schools.com/html/html_responsive.asp
    ...

    Pour tester, il suffit d'utiliser la vue adaptative associée aux outils de développement web intégré au navigateur : Ctrl+Shift+M et passer par le discret menu qui apparait en haute de fenêtre.
    Ici, celui de Firefox :
    0
  2. jordane45 Messages postés 30426 Date d'inscription   Statut Modérateur Dernière intervention   4 830
     
    Bonjour,

    Si tu veux voir comment doit se comporter un site en responsive, regarde comment fonctionne le framework bootstrap.
    Tu verras que le contenu s'adapte en largeur... mais aussi en déplaçant, si besoin, les blocks les uns en dessous des autres.. voir .. en en masquant certains...

    Et pour voir le rendu.. sache que :
    Ton navigateur ( enfin presque tous...) disposent des "outils de développeur" ( accessibles, le plus souvent, par la touche F12 ) et que dedans, tu peux émuler une vue smartphone ou tablette.
    Tu peux aussi, tout simplement, t'amuser à réduire la largeur de ton navigateur pour voir ce que ça donne....
    0
  3. flexi2202 Messages postés 3640 Date d'inscription   Statut Membre Dernière intervention   190
     
    bonjour

    Merci pour les réponses , l aide et c est rai que bootstrap fais des miracles
    je viens de tomber sur un code dans codepen
    mais je n arrive pas a agrandir le container
    https://codepen.io/digitalhen/pen/zexqPx
    le code est en partie hébergé a l extérieur de la page apparemment
    merci de l aide
    0
    1. jordane45 Messages postés 30426 Date d'inscription   Statut Modérateur Dernière intervention   4 830
       
      Faut regarder la doc bootstrap... Inclure les lib ne essaires
      Puis jouer avec les class de bootstrap

      Comme je ne sais pas ce que tu veux faire ni ce que tu as essayé.. impossible de t'en dire plus...
      0
  4. flexi2202 Messages postés 3640 Date d'inscription   Statut Membre Dernière intervention   190
     
    Merci Jordane
    voila j ai fini par trouver la solution
    il fallait juste que je crée une class container

    a présent je suis confronte a un autre soucis et je cherche la solution depuis hier matin

    je suis parvenu a intégrer un menu de navigation a un bootstrap
    voici le lien
    https://jsfiddle.net/flexi2202/dq2gtubc/4/
    mais je ne parviens pas a rétablir le sous menu dans le menu

    sauf si j enlève cette ligne 
    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css'><link rel="stylesheet" href="./style.css">

    mais du coup c est l effet boostrap qui ne fonctionne plus
    donc je pense que cela est une incompatibilité des librairies
    j ai beau chercher je ne trouve aucun exemple de barre de navigation avec sous menu qui fonctionne dans mon exemple

    merci de l aide
    0

  5. Vous n’avez pas trouvé la réponse que vous recherchez ?

    Posez votre question
  6. flexi2202 Messages postés 3640 Date d'inscription   Statut Membre Dernière intervention   190
     
    Merci pour la reponse
    donc dans mon head pour l instant j ai ceci 

      <title>CodePen - Bootstrap 4 card deck responsive</title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css'>
<link rel="stylesheet" href="./style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">


    donc d après la réponse j ai change ceci mais rien ne bouge au niveau du menu
    et apparemment je n ai pas besoin de js de bootstrap 

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    0
    1. jordane45 Messages postés 30426 Date d'inscription   Statut Modérateur Dernière intervention   4 830
       
      Le JS de bootstrap amène pas mal de fonctionnalités bien pratiques...
      Je t'invite à l'inclure dans ton code.

      Ensuite, il est préférable de charger tes CSS à la fin de ton head .... (histoire que le code soit propre et lisibile.. )

      Je t'invite également à regarder dans la doc bootstrap, comment faire un menu
      https://getbootstrap.com/docs/4.5/components/navbar/
      par ce que là.. tu essais de réinventer la roue et tu ne respectes pas la doc de bootstrap...

      Pour finir, si tu rencontres encore des soucis, pense à nous poster ( ICI ) le code COMPLET de ta page sans oublier les html, JS , CSS que tu as créés.

      (bien qu'au niveau css .. tu n'as, normalement, rien de particulier à créer, tout (ou quasiment..) pouvant se gérer via le css de bootstrap... )
      0
  7. flexi2202 Messages postés 3640 Date d'inscription   Statut Membre Dernière intervention   190
     
    Merci Jordane45

    cela semble fonctionner
    voila ce que j ai fait en vitesse juste pour tester
    mais je dois encore centrer , changer les couleurs ect...
    mais d apres ce que je lis tout peux ce faire sans utiliser de css a cote

    en 1 er lieu
    au apres 
    <meta charset="UTF-8">


    j ai insérer directement après 

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">


    puis dans le fond du code ceci 

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>


    et pour finir ceci la ou je veux faire apparaître le menu 

    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Dropdown
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
          </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
          <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
      </div>
    </nav>


    je ne sais pas si cela est correct mais cela semble fonctionner
    0
    1. jordane45 Messages postés 30426 Date d'inscription   Statut Modérateur Dernière intervention   4 830
       
      ça semble pas mal.

      Quand tu dis le " fond du code " .. tu veux dire à la fin de ton body, juste avant le </body> ?
      Si c'est ça, oui, c'est bien ce qu'il faut faire.


      PS: Pour les balises de code, pense à y indiquer le lange ( html, php ou css selon les besoin)
      Explications ( à lire ENTIEREMENT ) disponibles ici : https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code
      0
  8. flexi2202 Messages postés 3640 Date d'inscription   Statut Membre Dernière intervention   190
     
    Merci jordane
    voila comme ca pour ceux qui auront cherche comme moi durant des heures
    voila c es t solutionner

    oui je sais pour l emploi des codes , je le fais toujours , sauf cette fois j ai oublie
    oui voila juste avant </body>

    par contre j ai une dernière question
    j ai essaye de fixer le menu de navigation avec un style cela fonctionne
    avec
    position: fixed
    mais lorsque je fais défiler, le contenu vient couvrir la barre de navigation
    y a t il un moyen pour que la barre de navigation du menu soit fixe et en plus ne soit pas couverte lorsque le contenu remonte

    merci
    0
    1. jordane45 Messages postés 30426 Date d'inscription   Statut Modérateur Dernière intervention   4 830
       
      Il faut joueur (avec du css) sur le z-index des éléments je pense.
      0
  9. flexi2202 Messages postés 3640 Date d'inscription   Statut Membre Dernière intervention   190
     
    merci
    je vais regarder a cela
    0

Discussions similaires

Comment s’inscrire sur célibataire du web
Mimi412 -
MPMP10 -

6 réponses
Chemin Logo du site de la Cité de l'espace
Keiios -
blux -

11 réponses