compatible html et css mobile

Question

J'essaie de faire un site web pour la compagnie de mon ami et je l'ai fait, mais il ne semble que bon sur les ordinateurs de bureau. Sur les téléphones et les tablettes semble vraiment mauvais. Je faisais tellement de recherches mais je n'arrivais pas à trouver comment utiliser des mises en page fluides ou d'une autre manière. Sur certains téléphones, les divs se positionnent juste dans des endroits étranges et sur d'autres téléphones, ils ont l'air très petits ou couvrent tout l'écran. Et j'ai un espace blanc en bas de la page (sur les téléphones). Voici un lien pour que vous puissiez jeter un oeil: http://agrofit.hr/ p.s. c'est sur le croate mais vous n'avez pas besoin de lire :-))). S'il vous plaît aider dès que vous le pouvez. Merci!!!!

Answer 1

Essayez d'utiliser des mesures en pourcentage plutôt que des mesures de pixels.

Par exemple:

.example {width: 100%} 

plutôt que:

.example {width: 700px} 

également comme mentionné ci-dessus utilisent certains CSS requêtes des médias.

Ainsi, par exemple:

@media screen and (max-width: 700px) { 
img {width: 200px} 
} 

Cela dit que chaque fois que quelqu'un consulte sur un appareil avec un écran plus petit que 700px, l'image sera 200px.

Espérons que cela aide.

[Modifier] Pour tester votre site sur mobile -

1) Ouvrez la page Web que vous souhaitez tester dans Chrome.

2) Faites un clic droit et cliquez sur « Inspect »

3) Ensuite, une fenêtre grise doit apparaître soit au bas de votre navigateur ou le côté droit de votre navigateur.

4) Dans le coin supérieur gauche de la nouvelle fenêtre grise il y aura deux boutons, cliquez sur celui qui dit « barre d'outils de l'appareil bascule »

Vous pouvez maintenant sélectionner les différents appareils et de voir comment ils apparaissent dans chacun.

Answer 2

Vous devriez lire les requêtes média css et les mises en page réactives. Vous pouvez également consulter des travaux de cadre sensibles comme bootstrap