je veux que mon site s'adapte a tous les resolution d'ecran Fermé

Question

Bonjour, je cherche un bon tuto pouvant me montrer comment faire un site qui s'adapte a tout les resolution d'ecran.merci d'avance



Configuration: Windows XP / Chrome 15.0.874.106

arthezius · Accepted Answer

Le plus simple est de faire un site à largeur fixe, centré dans la page.
Tu peux par exemple te fixer une largeur de 900px pour ta page.
Celui-ci sera donc adapté à toutes les résolutions.

wiscan · Answer

merci pour la reponse mais je veux que mon site soit flexible et prend toute la llargeur de l'ecran dispo

tijverwest · Answer

Bonjour, 
Ce que vous demandez s'appelle le Responsive Webdesign! Il s'agit donc de retravailler le site afin qu'il s'adapte parfaitement aux différentes tailles d'écrans, que ce soit ordinateurs, tablettes ou bien smartphones. L'utilisateur aura donc un confort de lecture accru ainsi qu'un meilleur esthétique visuel. 


Bien cordialement, 

Loïc

<?php · Answer

Bonjour, d'après ce que je comprends tu aimerais avoir un Responsive Webdesign
Personnellement pourquoi ne pas prendre bootstrap, bootstrap-responsive afin de pouvoir l'améliorer?:) 

Cordialement.
<?php

Amélie-miw · Answer

Bonjour,

Un lien intéressant :
https://www.alsacreations.com/tuto/lire/547-Faire-un-site-pour-toutes-les-resolutions.html

mpmp93 · Answer

Bonsoir, Votre solution s'appelle "responsive design" et tripoter les CSS via les media-queries en CSS3. Un exemple ici: http://www.camping-car.org/index.php?page=articles/arnaques/accueil Sur un écran de plus de 1200 pixels, le contenu est sur 4 colonnes, resserez l'écran il passe à 3 puis 2 puis 1 colonne et sur tel mobile finit sur une colonne en enchaînant tout le contenu. Tout est réalisé en CSS3 via des media-queries. Exemple: .threeCols { /* gère l'affichage bloc de texte sur deux colonnes */ -webkit-column-count: 3; -webkit-column-rule: 1px dotted #b0b0b0; -webkit-column-gap: 16px; -moz-column-count: 3; -moz-column-rule: 1px dotted #b0b0b0; -moz-column-gap: 16px; column-count: 3; column-rule: 1px dotted #b0b0b0; column-gap: 16px; padding-bottom: 6px; border-bottom: 1px dotted #7f7f7f; margin-bottom: 12px; margin-top: 6px; } @media only screen and (max-width: 1920px) { .threeCols { -webkit-column-count: 4; -moz-column-count: 4; column-count: 4; } } @media only screen and (max-width: 1280px) { .threeCols { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; } } @media only screen and (max-width: 800px) { .threeCols { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; } } @media only screen and (max-width: 600px) { .threeCols { -webkit-column-count: 1; -moz-column-count: 1; column-count: 1; } } .twoCols section, .threeCols section { display: inline-block; } Ce code CSS appliqué à un div, exemple:

............

affiche normalement sur 3 colonnes pour des écrans de 1200 pixels, mais passe à 4 colonnes sur des écrans plus lardes et 2 ou 1 colonnes sur des écrans moins larges ou tel mobiles. A+ A+

wiscan · Answer

merci a tous pour vos réponses je suis entrain de lire tous les sujets qui même au liens proposés .Et je crois que je vais y trouver mon bonheur

Je veux que mon site s'adapte a tous les resolution d'ecran

7 réponses

Discussions similaires