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

Réponse 2 / 7

wiscan Messages postés 69 Date d'inscription Statut Membre Dernière intervention

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

arthezius Messages postés 3538 Date d'inscription Statut Membre Dernière intervention 475

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

astuces72 Messages postés 7769 Date d'inscription Statut Membre Dernière intervention 1 641

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.

Nhay Messages postés 838 Date d'inscription Statut Membre Dernière intervention 126

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.

Réponse 3 / 7

<?php Messages postés 1 Date d'inscription Statut Membre Dernière intervention

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

Réponse 4 / 7

Amélie-miw Messages postés 5 Date d'inscription Statut Membre Dernière intervention 2

Bonjour,

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

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

Posez votre question

Réponse 5 / 7

wiscan Messages postés 69 Date d'inscription Statut Membre Dernière intervention

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

Réponse 6 / 7

tijverwest Messages postés 1 Date d'inscription Statut Membre Dernière intervention

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

Réponse 7 / 7

mpmp93 Messages postés 6648 Date d'inscription Statut Membre Dernière intervention 1 340

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+

Pierrecastor Messages postés 41491 Date d'inscription Statut Modérateur Dernière intervention 4 149

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

jean448 Messages postés 1340 Date d'inscription Statut Membre Dernière intervention 238

Tu me sauve, très bon tuto

HellBenito Messages postés 56 Date d'inscription Statut Membre Dernière intervention

Bien utile, une idée pour la police? ^^

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

7 réponses

Votre réponse

Discussions similaires