Sujet : Page web responsive besoin d'aide :/
Andouille360
Bonjour.
Depuis quelques jours j'essaye de faire en sorte que ma page web soit en responsive. J'aimerais que sur ordinateur il y ait une mise en page, et que sur mobile une mise en page légèrement différente. Pour ce faire j'utilise donc des media queries.
En gros, ça ressemble à ça :
https://gist.deblan.org/en/view/57223ec6139b0
Sauf que ça ne marche pas. Et lorsque j'indique des proportions à l'aide de max-width non plus ça ne marche pas. Il n'y a aucune différence mobile/ordinateur.
De même, j'aimerais savoir s'il était possible de tester mon site sur mon téléphone (en le branchant sur l'ordi par exemple) afin de voir en direct ce que ça donne ? Si non, quel moyen fiable utilisez-vous pour tester un site sur différentes plateformes ?
Enfin, j'analyse régulièrement differents sites. Certains arrivent à faire en sorte que le code source de la page soit différent selon notre appareil. Par exemple, sur ordi ce sera <meta name="viewport" content="width=1240"> et sur mobile <meta name="viewport" content="width=350"> alors que c'est la même page. Comment on arrive à faire ça ?
Merci d'avance pour votre aide.
Skyboys
Hello,
Il faut :
1. Ajouter la balise suivante dans le <head> : <meta name="viewport" content="width=device-width, initial-scale=1" />
2. Préciser une max-width par exemple @media screen and (max-width: 768px) {}
Andouille360
Merci pour ta réponse. Néanmoins un problème persiste : pour la version mobile, j'ai une image de grande taille (640*1488) qui doit être en background. J'aimerais que cette image s'adapte à la taille de l'écran du téléphone en largeur (c'est à dire qu'une fois la page ouverte, on ne puisse ni aller sur la droite ni sur la gauche, mais on peut quand même monter et descendre la page).
J'ai essayé background-size: cover; mais lorsque j'ouvre la page sur mon gsm je me retrouve avec une grosse image qui n'épouse pas parfaitement l'appareil en largeur...
Merci d'avance !
Skyboys
Peux-tu coller ton code ici stp : http://codepen.io/
Sans voir le code c'est difficile de te répondre.
Andouille360
Pas de soucis !
http://codepen.io/Andouille360/pen/vGVvPw
Merci d'avance
xsaK3s
Hello,
Rajoute ceci à ton CSS pour mobile:
height: 100vh; (va prendre toute la hauteur du téléphone, non obligatoire)
width:100%; (va prendre toute la largeur du téléphone)
Devilscry
Salut,
Quelque chose comme ça ? http://codepen.io/anon/pen/vGQBwX?editors=1100
Pour tester ton site en live sur plusieurs terminaux, tu peux utiliser Browsersync.
Ou bien utilise simplement les outils de développement de Chrome et clique sur l'icône qui représente une tablette et un mobile.
Andouille360
Nickel le code Devilscry, c'est exactement ce que je voulais 
Merci à tous !