Rendre la page adaptée aux mobiles ?

Question

J'ai de nombreuses pages Web et quelques sites Web. Le fait est que je suis débutant. J'utilise HTML5 et CSS3 de base, mais je ne sais pas comment les rendre plus grands, plus petits et plus adaptés aux mobiles. Par exemple, voici une de mes pages et un de mes sites où vous pouvez voir qu'il y a quelques problèmes mineurs avec le zoom avant et arrière, et qu'il n'est pas du tout adapté aux mobiles :

https://mitkovtori.github.io/

https://mitko-vtori-world.github.io/Mitko-Vtori-World/

Alors, existe-t-il un moyen de résoudre le problème avec toutes les tailles, ou de le recréer pour les appareils mobiles, etc. ?

J'ai essayé d'utiliser le pourcentage "%" pour représenter la taille, par exemple :

<width="25%">

J'ai également essayé d'utiliser le pixel "25px". Seulement le chiffre "25".

Mais peu importe ce que je fais, j'ai toujours des problèmes pour zoomer, dézoomer et déplacer l'appareil.

Le code est 100% open source, vous pouvez donc faire le tour de mon code merdique et essayer de comprendre où je me suis trompé.

Les référentiels des deux sites que j'ai partagés au début : https://github.com/MitkoVtori/MitkoVtori.github.io

https://github.com/Mitko-Vtori-World/Mitko-Vtori-World

Answer 1

Utilisez des requêtes multimédias, par exemple, si vous souhaitez appliquer un style à des tailles d'écran inférieures à 1023 pixels, vous devez ajouter ce qui suit au bas de votre fichier CSS

@media(max-width:1023px){ 
   /* your code will be here */
   .navbar{
        padding: 10px 15px;
    }
}

Si vous voulez moins de 768, veuillez recommencer

@media(max-width:768px){ 
       /* your code will be here */
       .navbar{
            padding: 10px 15px;
        }
    }

Modes similaires pour grands et petits écrans