Question sur la responsive des sites web

Résolu

flexi2202 Messages postés 3822 Date d'inscription Statut Membre Dernière intervention -
flexi2202 Messages postés 3822 Date d'inscription Statut Membre Dernière intervention - 11 janv. 2021 à 15:34

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

A voir également:

Question sur la responsive des sites web
Web office - Guide
Meilleurs sites de téléchargement - Accueil - Outils
Navigateur web - Guide
Création de sites web - Guide
Sites de vente d'occasion - Guide

8 réponses

Réponse 1 / 8

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 :

Réponse 2 / 8

jordane45 Messages postés 38480 Date d'inscription Statut Modérateur Dernière intervention 4 746

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....

Réponse 3 / 8

flexi2202 Messages postés 3822 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

jordane45 Messages postés 38480 Date d'inscription Statut Modérateur Dernière intervention 4 746

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...

Réponse 4 / 8

flexi2202 Messages postés 3822 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

jordane45 Messages postés 38480 Date d'inscription Statut Modérateur Dernière intervention 4 746

Commence par charger les bons css et JS liés à bootstrap 4.5
et profites en pour regarder la doc :
https://getbootstrap.com/docs/4.5/getting-started/introduction/

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

Posez votre question

Réponse 5 / 8

flexi2202 Messages postés 3822 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">

jordane45 Messages postés 38480 Date d'inscription Statut Modérateur Dernière intervention 4 746

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... )

Réponse 6 / 8

flexi2202 Messages postés 3822 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

jordane45 Messages postés 38480 Date d'inscription Statut Modérateur Dernière intervention 4 746

ç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

Réponse 7 / 8

flexi2202 Messages postés 3822 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

jordane45 Messages postés 38480 Date d'inscription Statut Modérateur Dernière intervention 4 746

Il faut joueur (avec du css) sur le z-index des éléments je pense.

Réponse 8 / 8

flexi2202 Messages postés 3822 Date d'inscription Statut Membre Dernière intervention 190

merci
je vais regarder a cela

Discussions similaires

Chemin Logo du site de la Cité de l'espace

Votre réponse

Discussions similaires