Rendre mon site responsive
geiffy
Messages postés
15
Date d'inscription
Statut
Membre
Dernière intervention
-
geiffy Messages postés 15 Date d'inscription Statut Membre Dernière intervention -
geiffy Messages postés 15 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
J'ai conçu un site composé de 5 pages principales et de deux menus (un menu horizontal déroulant et un menu vertical). Je souhaiterais rendre mon site responsive. Dois-je insérer les codes appropriés dans chaque page principale et chaque page des sous-menu et menu vertical? Quels codes aussi pour les différents écrans? Je requiers donc l'aide d'un spécialiste de la question. Je le ou la remercie beaucoup par avance. Cordialement.
J'ai conçu un site composé de 5 pages principales et de deux menus (un menu horizontal déroulant et un menu vertical). Je souhaiterais rendre mon site responsive. Dois-je insérer les codes appropriés dans chaque page principale et chaque page des sous-menu et menu vertical? Quels codes aussi pour les différents écrans? Je requiers donc l'aide d'un spécialiste de la question. Je le ou la remercie beaucoup par avance. Cordialement.
A voir également:
- Rendre mon site responsive
- Site comme coco - Accueil - Réseaux sociaux
- Site de telechargement - Accueil - Outils
- Quel site remplace coco - Accueil - Réseaux sociaux
- Site x - Guide
- Site pour vendre des objets d'occasion - Guide
2 réponses
Bonjour,
Cette question a déjà été posée de nombreuses fois, tu trouveras les liens sous ta question.
Pour une solution simple : https://forums.commentcamarche.net/forum/affich-34154212-rendre-mon-site-responsive#5
Le lien direct : https://www.alsacreations.com/astuce/lire/1177-une-feuille-de-styles-de-base-pour-le-web-mobile.html
Cette question a déjà été posée de nombreuses fois, tu trouveras les liens sous ta question.
Pour une solution simple : https://forums.commentcamarche.net/forum/affich-34154212-rendre-mon-site-responsive#5
Le lien direct : https://www.alsacreations.com/astuce/lire/1177-une-feuille-de-styles-de-base-pour-le-web-mobile.html
Bonjour,
La réponse de dugenou ...c'est une réponse simpliste... et qui ne prend pas réellement en compte le véritable aspect "responsive" d'un site.
Le réponsive ne sert pas juste à dimensionner la page.... il sert aussi à la réorganiser.. voir à en changer le contenu (ou du moins l'aspect).
En responsive, on peut avoir besoin de masquer des zones de l'écran qui ne seraient pas utiles sur un smartphone par exemple.
On peut aussi jouer avec l'aspect... lorsqu'on passe en affichage "mobile" on aura tendance à remplacer les "label" présents devant les input par des incones, le menu devient un "menu burger" , changer l'ordre dans lequel certains éléments s'affichent...etc...
Si tu n'as pas envie de coder tout le css toi même .. tu peux utiliser un framework css tel que Bootstrap.
Par contre, ça implique (dans tous les cas de toute manière....) que tu repasses entièrement sur ton code pour utiliser les CLASS et les ATTRIBUTS du CSS afin de le rendre responsive.
La réponse de dugenou ...c'est une réponse simpliste... et qui ne prend pas réellement en compte le véritable aspect "responsive" d'un site.
Le réponsive ne sert pas juste à dimensionner la page.... il sert aussi à la réorganiser.. voir à en changer le contenu (ou du moins l'aspect).
En responsive, on peut avoir besoin de masquer des zones de l'écran qui ne seraient pas utiles sur un smartphone par exemple.
On peut aussi jouer avec l'aspect... lorsqu'on passe en affichage "mobile" on aura tendance à remplacer les "label" présents devant les input par des incones, le menu devient un "menu burger" , changer l'ordre dans lequel certains éléments s'affichent...etc...
Si tu n'as pas envie de coder tout le css toi même .. tu peux utiliser un framework css tel que Bootstrap.
Par contre, ça implique (dans tous les cas de toute manière....) que tu repasses entièrement sur ton code pour utiliser les CLASS et les ATTRIBUTS du CSS afin de le rendre responsive.
Merci pour ton aimable réponse, mais je n'ai pas trouvé la réponse exacte à ma question. Cordialement.
Et le code CSS dans ton fichier style.css :
@media (max-width: 640px) { * { box-sizing: border-box; } /* passer body (et tous les éléments de largeur fixe) en largeur automatique */ body { width: auto; margin: 0; padding: 0; } /* fixer une largeur maximale de 100% aux éléments potentiellement problématiques */ img, table, td, blockquote, code, pre, textarea, input, iframe, object, embed, video { max-width: 100%; } /* conserver le ratio des images */ img { height: auto; } /* gestion des mots longs */ textarea, table, td, th, code, pre, samp { -webkit-hyphens: auto; /* césure propre */ -moz-hyphens: auto; hyphens: auto; word-wrap: break-word; /* passage à la ligne forcé */ } code, pre, samp { white-space: pre-wrap; /* passage à la ligne spécifique pour les éléments à châsse fixe */ } /* Passer à une seule colonne (à appliquer aux éléments multi-colonnes) */ .element1, .element2 { float: none; width: auto; } /* masquer les éléments superflus */ .hide_mobile { display: none !important; } /* Un message personnalisé */ body:before { content: "Version mobile du site"; display: block; text-align: center; font-style: italic; color: #777; } } @media (max-device-width:768px) and (orientation: landscape) { html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } }