Je veux que mon site s'adapte a tous les resolution d'ecran [Fermé]

Signaler
Messages postés
69
Date d'inscription
lundi 12 novembre 2012
Statut
Membre
Dernière intervention
25 juin 2013
-
Messages postés
56
Date d'inscription
vendredi 28 mars 2014
Statut
Membre
Dernière intervention
20 mars 2015
-
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



A voir également:

7 réponses

Messages postés
3538
Date d'inscription
jeudi 15 mai 2008
Statut
Membre
Dernière intervention
11 septembre 2016
459
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.
2
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 65492 internautes nous ont dit merci ce mois-ci

Messages postés
38629
Date d'inscription
mercredi 5 novembre 2003
Statut
Modérateur
Dernière intervention
12 juin 2021
3 817
Salut

Oui, mais non, si la largeur est fixe, par définition, ça ne peut pas s'adapter à différentes résolution
Et bien non en faite car maintenant on trouve des écrans à 1366x768 :)
Messages postés
69
Date d'inscription
lundi 12 novembre 2012
Statut
Membre
Dernière intervention
25 juin 2013

merci pour la reponse mais je veux que mon site soit flexible et prend toute la llargeur de l'ecran dispo
Messages postés
3538
Date d'inscription
jeudi 15 mai 2008
Statut
Membre
Dernière intervention
11 septembre 2016
459
Tu peux donc mettre une largeur en pourcentage.
Exemple:
div#container{ 
width:90%; 
}

Personnellement j'aime pas trop ce genre de site avec largeur fluide. Sur un écran de taille standard ça passe encore mais sur des grand écran tel que ceux des iMac c'est pas terrible pour la lecture (largeur de 1920px).
Mais bon, tu fais ce que tu veux.
Tu peux aussi regarder par ici: http://www.alsacreations.com/static/gabarits/liste.html
Messages postés
6387
Date d'inscription
vendredi 15 janvier 2010
Statut
Membre
Dernière intervention
10 juin 2021
1 539
slt

comme ça, avec mon 26' je vais avoir de la place entre chaque mot :D

Il va falloir qu'il soit vachement agrémenter pour que ça ne fasse pas que du vide.
Toute la largeur, c'est plus pour un forum, est ce un forum ?
il y a peu de site en toute largeur.
Messages postés
838
Date d'inscription
vendredi 2 novembre 2012
Statut
Membre
Dernière intervention
17 décembre 2015
123
La plupart des gens qui mettent leur site en pourcentage ajoute un min-width/max-width pour ne pas que ça prennent de proportion inadéquate.
Messages postés
1
Date d'inscription
vendredi 23 novembre 2012
Statut
Membre
Dernière intervention
23 novembre 2012

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
Messages postés
5
Date d'inscription
jeudi 22 novembre 2012
Statut
Membre
Dernière intervention
6 décembre 2012
2
Messages postés
69
Date d'inscription
lundi 12 novembre 2012
Statut
Membre
Dernière intervention
25 juin 2013

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
Messages postés
1
Date d'inscription
vendredi 14 octobre 2011
Statut
Membre
Dernière intervention
23 novembre 2012

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
Messages postés
6650
Date d'inscription
mercredi 13 avril 2011
Statut
Membre
Dernière intervention
28 septembre 2015
1 296
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:

<div class="theeCols">
 ............
</div>


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+

Messages postés
38629
Date d'inscription
mercredi 5 novembre 2003
Statut
Modérateur
Dernière intervention
12 juin 2021
3 817
Très bonne exemple, je relance d'un bon tuto tout neuf du hollandais volant :

https://lehollandaisvolant.net/?d=2012/11/24/20/37/08-css-faire-un-theme-mobile-avec-html5-et-responsive-design
Messages postés
1331
Date d'inscription
mardi 29 décembre 2009
Statut
Membre
Dernière intervention
26 janvier 2017
212
Tu me sauve, très bon tuto
Messages postés
56
Date d'inscription
vendredi 28 mars 2014
Statut
Membre
Dernière intervention
20 mars 2015
1
Bien utile, une idée pour la police? ^^