Responsive design : positions joomla et resolution d'image

[nico.bzh]

Bonjour,

Depuis plusieurs jours je lis de la doc sur le RWD pour essayer de comprendre son fonctionnement.
Mais il a certaines choses que je ne comprends pas tres bien :

- Positions joomla et mise en page :
Les positions sont dans le HTML. Je ne comprends pas comment s'effectue le repositionnement selon l'ecran.
J'ai compris cote css pour modifier le nombre de colonnes, mais je ne comprends pas comment modifier l'ordre/la position des positions joomla.

Par exemple j'ai ca pour un ordi :
position1 position2
position3 position4

et je veux ca pour un Iphone :
position2
position3
position4
position1


- Resolution d'image :
D'apres ce que j'ai lu, il y a un moyen pour utiliser la meme image pour les differents ecrans en modifiant sa resolution. Mais je ne trouve pas beaucoup de doc la dessus.


Quelqu'un pourrait il m'expliquer ou me diriger vers de la doc ?

Merci
Nico

[toffffe]

Re : Responsive design : positions joomla et resolution d'image

- Resolution d'image :
D'apres ce que j'ai lu, il y a un moyen pour utiliser la meme image pour les differents ecrans en modifiant sa resolution. Mais je ne trouve pas beaucoup de doc la dessus.

Salut
En fait tu peux avoir la même image pour tous les supports, mais il faut qu'elle s'adapte en fonction de la taille de l'écran.
Dans ce cas il faut lui donner une class avec une largeur maxi, une mini et une largeur en %.

exemple:

.classimgresponsive{width:100%;min-width:150px;max-width:800px;height:auto;float:left;}

[nico.bzh]

Re : Responsive design : positions joomla et resolution d'image

Merci de ta reponse. Si j'ai bien compris c'est le systeme "fluid image". Mais ce que je veux eviter c'est de creer la meme image dans plusieurs resolutions ou d'envoyer une image HD a un portable. Il y a egalement le probleme des ecrans retina.

Je viens de trouver cette technique qui s'appelle Adaptative image :
Article : http://24ways.org/2011/adaptive-imag...onsive-designs
Site officiel : http://adaptive-images.com/

Vous en pensez quoi ?

[lefabdu51]

Re : Responsive design : positions joomla et resolution d'image

De la doc sur le sujet: Pour des exemples de code, utilise fierbug directement sur le site.

http://twitter.github.com/bootstrap/base-css.html#images

http://twitter.github.com/bootstrap/components.html#thumbnails