Veuillez vous connecter ou créer un compte pour suivre ce topic
Ce topic est suivi par: CodeOtaku, Jerem971, tomasi
Auteur Sujet: Comment Adapté son site pour smartphone & tablette

CodeOtaku

Messages: 7

Bonjour à tous,

Je cherche à adapté mon site pour tout type d'appareil (autre que mon PC) j'ai essayer de changer le css en
remplaçant les pixels par des pourcents mais le résultat n'était pas
celui escompté. Je pense qu'il faut utiliser les Media Queries mais je
sais pas du tout comment m'y prendre car je voudrais si possible essayer
de garder la même mise en page et ne pas avoir à cacher du contenu en
fonction de l'appareil et donc j'aimerais avoir le code html/css qui
puisse faire cela !

Voilà, merci d'avance, j'attend vos réponses avec impatience 
Cordialement
Publicité

Clouder

Messages: 144

Bonjour CodeOtaku, 

Pour gérer plus facilement les différentes vues (TV, PC, tablette et smartphone) de ton site, je te conseil d'utiliser Bootstrap. 
Cela te permettra de ne pas forcément réécrire ce qui est déjà existant ailleurs.

CodeOtaku

Messages: 7

D'accord merci beaucoup, je pense que je vais l'utiliser; Mais es ce que t'aurait des sites, vidéos que tu pourrais me recommander pour débuter sur Bootstrap afin que je puisse l'intégrer à mon code pour adapter mon site pour mobile !
Cordialement

Jerem971

Messages: 667

Re:

Hello 'CodeOtaku', tu exagères sur ce point... Mais j'ai été gentil de prendre le temps de chercher pour toi... 😀
Un tutoriel sur le site du zéro.
Un tutoriel de Grafikart.
Et si tu veux d'autres tutoriels, il y en a plein sur YouTube (en entrant le terme "tutoriel bootstrap")
Mais il y a peut-être un petit soucis avec Bootstrap. (J'ai horreur d'utiliser les frameworks)

ThomasT

Messages: 14

Bonjour,
Si jamais tu souhaites faire du responsive pur sans bootstrap, voici un début de code CSS :
@screen media and (max-width: 750px){

}
tout ce qui se trouvera entre les crochets seront appliqués lorsque la taille de l'écran de l'utilisateur sera inférieure à 750px 😉

CodeOtaku

Messages: 7

Re  ThomasT  :
J'ai compris la base des Medias Queries 
Mais quand je modifie dans les accolades avec *{width:auto;} le site ne s'adapte pas du tout ! Car je voudrais si possible ne pas avoir à utiliser le display:none; et garder la même mise en forme en empêchant le visiteur de pouvoir zoomer mais lorsque j'utilise ce code on peut quand dézoomer sur téléphone et du coup cela détruit la mise en forme de mon site
<meta name="viewport" content="initial-scale=1.0,user-scalable=no">
Je ne comprends ou est  mon erreur merci d'avance !!!

Jerem971

Messages: 667

Re:

Essaye plutôt avec cette métadonnées :

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0, minimal-ui, shrink-to-fit=no" />
Celle-ci adapte le contenu aux mobiles et empêche l'utilisateur de zoomer, toutefois si tu souhaites que l'utilisateur zoom mais que l'affichage reste adapté aux smartphones alors utilise plutôt cette métadonnées :

<meta name="viewport" content="width=device-width, initial-scale=1" />
Si tu souhaites que le contenu de ton site s’adapte à n'importe quelle largeur d'écrans, c'est ici et ici.

N'hésite pas à vérifier ton code HTML et CSS à l'aide du W3C (pour HTML ; pour CSS). N'hésite pas aussi à vérifier ton code à l'aide de Firefox ! (Si Firefox affiche un bout de code en rouge cela signifie qu'il y a une erreur de syntaxe ou de positionnement) 😉

PS : Si ton site est en ligne, n'hésite pas à partager le lien (si et seulement si) 😉


Vous devez vous connecter ou créer un compte pour poster une réponse