[RÉGLÉ] Adapter le graphisme aux différentes résolution

[ohlala]

Bonjour,
Que faut-il faire pour adapter le graphisme aux différentes taille d'écran? Dans quel fichier faut-il travailler? css/general.css?
Car j'ai vu que mon site et notemment le menu (module ajouté), s'affichait différemment selon les écrans... http://mescavaliers.fr/

[SiD11]

Re : Adapter le graphisme aux différentes résolution

Si je ne me trompe pas, tu a que 2 choix:

- soit la résolution est automatique par rapport à l'écran du visiteur
- soit la résolution est unique pour tous les écrans, peu importe la taille !!!

La modification ce fait au niveau du code HTML il me semble, je ne suis pas sur :/

[cavo789]

Re : Adapter le graphisme aux différentes résolution

Bonjour

Il n'y a pas de truc : soit une même image quelque soit la résolution du site soit tu programmes une fonction en javascript qui va modifier dynamiquement la taille de ton image (bof bof).

Si tu es programmeur, tu peux développer un code en php qui charge l'image avec GD Library et la redimensionne avant de l'envoyer vers le browser. Est-ce que cela en vaut la peine toutefois ?

[ZenAir Cashmere]

Re : Adapter le graphisme aux différentes résolution

Pour ma part, je définis une taille fixe à mon template, quelque soit la résolution des mes visiteurs

[lefabdu51]

Re : Adapter le graphisme aux différentes résolution

un debut de solution pour toi:

Ces lien te seront utile.

http://www.commentcamarche.net/faq/849-php-detecter-la-resolution-d-affichage

http://www.developpez.net/forums/d187079/php/langage/syntaxe/php-js-recuperer-resolution-lecran-client/

une fois la resolution détéctée, tu fait une boucle if au debut de ton fichier index.php pour choisir les styles css a afficher en fonction de la resolution de l ecran.
Et chaque feuille de style pointe vers des images aux dimensions que tu auras definies. (nom specifique de fichier).

if ma resolution est 1280px de large
alors utilisation du fichier css N°1.css
elsif ma resolution est 1024px de large
alors utilisation du fichier css N°2.css
..........etc
else chargement des fichiers css standard et la tu laisse les fichiers standard se charger si la resolutionne correspond a aucun des choix que tu auras défini.

[ohlala]

Re : Adapter le graphisme aux différentes résolution

Merci beaucoup! Petite question, hors contexte, les sites de luxe utilisent-ils des tailles fixes ou adaptables? En gros, est-ce que ça peut jouer sur l'image d'une marque?

[jisse03]

Re : Adapter le graphisme aux différentes résolution

Merci beaucoup! Petite question, hors contexte, les sites de luxe utilisent-ils des tailles fixes ou adaptables? En gros, est-ce que ça peut jouer sur l'image d'une marque?

Bonjour,

Les sites de "luxe" utilisent en général une définition fixe, en particulier le standard 996 pixels de large.

Les tentatives pour obtenir un même résultat avec des résolutions flottantes sont le plus souvent un désastre esthétique.

La résolution flottante s'adapte superbement aux sites d'information ou scientifiques où le texte a un impact très supérieur au design, mais très très moyennement dès que le design est primordial.

[ohlala]

Re : Adapter le graphisme aux différentes résolution

Merci! Je me coucherais moins bête ce soir

[lefabdu51]

Re : Adapter le graphisme aux différentes résolution

si ca peut t aider..a inserer dans ton fichier index.php ca te permet de choisir une feuille de style en fonction de la résolution...
Donc tu peut mettre une image pour chaque resolution d écran et adapter $tpath correspond au chemin vers la racine de ton template, c est a dire le meme dossier ou tu as ton fichier index.php. ca proviens du template blank disponible sur le JED......
<link rel="stylesheet" media="only screen and (max-width: 768px)" href="<?=$tpath?>/css/tablet.css" type="text/css" />
<link rel="stylesheet" media="only screen and (min-width: 320px) and (max-width: 480px)" href="<?=$tpath?>/css/phone.css" type="text/css" />

[ohlala]

Re : Adapter le graphisme aux différentes résolution

Merci c'est intéressant. J'apprends plein de chose!