Adaptation par rapport à la résolution

Salut à tous,

Je suis en train de développer pour un projet un site web assez basique sous Wordpress. Il ne prendra pas la même forme qu'un blog, mais intégrera les mécaniques de post à certain endroit bref...

Je suis un gros débutant en matière d'adaptation de mon contenu par rapport à la taille d'une fenêtre, même si je ne prévois pas pour le moment d'adapter sur mobile j'aimerais pouvoir avoir un résultat correct peut importe la résolution que l'utilisateur adapte sur un écran PC.

J'ai fais un tour sur différents liens (notamment ce site), mais je vous avoue que je suis perdu. J'ai vu la notion de media-queries et de min/max-width/height sauf que je ne sais pas où donner de la tête car j'essaye d'appliquer min-width et autre dans mon code mais le résultat n'arrive pas à celui que j'aimerais... En clair je pige pas du tout le fonctionnement. Dois-je faire un min/max-width/height à l'aide des media-queries ?

Merci d'avance, si quelqu'un pourrait éclairer ma lanterne.
Modifié par CroiSciento (05 Mar 2014 - 12:41)

Bonjour CroiSciento,

Le responsive design, c'est le media queries ^^

Vous avez à disposition des frameworks CSS qui vous permettrons d'avoir une excellente base de départ. Si vous ne souhaitez pas les utiliser, vous pouvez vous en inspirer, l'analyse de leur code est très formatrice :
- Bootstrap : http://getbootstrap.com/
- Foundation : http://foundation.zurb.com/

Vous trouverez sûrement quelques templates Worpress basés sur ces frameworks.

Bonnes recherches et bon code...

Joue avec le max-width de ton conteneur, il te permettra de comprendre comme ça s'adapte.
Ensuite, il suffit de s'amuser avec les media queries..

J'ai jamais vu les Frameworks, d'ailleurs je viens tout juste de voir à quoi ça sert. J'ai trouvé quelques templates basés sur les Frameworks, mais au final ça reviens à reprendre du code déjà utilisé y'a beaucoup de choses à regarder, et j'aimerais apprendre de moi même comment optimiser ma page pour des résolutions différentes. Même si aussi bien apprendre à utiliser un framework peut être très utile je préfère en rester là où j'ai commencé et jouer sur les propriétés que j'ai déjà. ^^

Ensuite pour les media-queries je donnerais une max/min-height/width en fonction des résolutions d'écrans que j'aurais définis c'est bien cela?

En tout cas merci beaucoup pour vos réponses.

Alors c'est parti sur les chemins de la découverte...

Vous avez parmi toutes les philosophies, 2 approches simples à votre disposition :
1 - Partir de la version mobile vers la version bureau.
2 - Ou inversement de la version bureau vers la version mobile.

Par exemple Bootstrap utilise l'approche Mobile first. Voici la structuration CSS de base :

.classname {
    /* Mobile first */
}

@media (min-width: 768px) {
  .classname {
    /* Small screen / tablet */
  }
}

@media (min-width: 992px) {
  .classname {
    /* Medium screen / desktop */
  }
}

@media (min-width: 1200px) {
  .classname {
    /* Large screen / wide desktop */
  }
}

Tout le travail va se faire en surcharge : arrivées aux différentes largeurs minimales, les propriétés de .classname surchargeront les propriétés actives des largeurs précédentes.

Espérant que ces quelques infos vous auront éclairé le sujet.
Bon code...
Modifié par Guiwint (06 Mar 2014 - 09:35)

Salut,

L'utilisation de framework n'est pas forcément utile dans tous les cas. On peut aussi juste se faire ses petites classes bien comme il faut.

Dans un premier temps, je pense qu'il faut que tu te documentes sur les media queries.

Attention l'abus de framework CSS nuit gravement à la Cssanté.