1485 sujets

Web Mobile et responsive web design

Bonjour à toutes et à tous,

Mon site à un probleme d'affichage pour les mobiles, je ne veux pas faire un site mobile mais faire comme pour le site d'apple, que le site soit bien "cadré" et ce n'est malheureusement pas le cas pour le mien.

pour le voir correctement avec du contenu c'est ici

Voila voila Smiley decu
Bonjour,

Pour cela il te faut faire ce que l'on appel du responsive design en utilisant les media queries : http://www.alsacreations.com/article/lire/930-css3-media-queries.html

En fait tu peux appliquer en CSS3 certains style a certains "points de rupture" :
/* Sur écran normal */
body { background: red; }
/* pour une surface d'affichage de 640px max */
@media (max-width:640px) { background: blue; }

Ici le point de rupture est à 640px, sur une grande fenêtre le body aura sera rouge et sur un "écran" de moins de 640px il sera bleu.

C'est assez simpliste mais pour un commencement c'est pas mal. Après il faudra prendre en compte le viewport (http://www.alsacreations.com/article/lire/1490-comprendre-le-viewport-dans-le-web-mobile.html) pour être plus précis.

Voici une base de feuille de style mobile pour t'aider : (http://www.alsacreations.com/astuce/lire/1177-une-feuille-de-styles-de-base-pour-le-web-mobile.html)
Bonjour,

Tu peux travailler avec du responsive design
Mais tu peux aussi utiliser les %

Voici quelques modifs que tu pourrais faire dans ta partie formulaire

searchbords : width:95%
Ajoutes "display:inline-block;margin:0 auto;" à ton objet Form
searchinputhome: text-align:center;
et sur la classe searchrechercherhome : width: 80%;

Tu peux utiliser http://www.dactyle.com/display_mobile/mobiledisplay.php pour valider sur différents mobiles.

A toi maintenant de regarder les autres éléments

Bon courage
Ho Je suis sincèrement désolé,

Je n'avais pas du voir mes mails, Je n'avais pas vu que l'on m'avait répondu ;(

Pardon à maximesimeon

Et merci à vous deux pour les infos mais j'ai réussis, j'ai réglé mes problèmes, je vais aller faire un tour sur ton validateur de site mobile merci à tous Smiley langue