Die Seite mobilfreundlich gestalten?

Question

Ich habe viele Webseiten und einige Websites. Die Sache ist, ich bin ein Anfänger. Ich verwende einfaches HTML5 und CSS3, weiß aber nicht, wie ich sie vergrößern und verkleinern und für Mobilgeräte optimieren kann. Hier ist zum Beispiel eine meiner Seiten und eine meiner Websites, auf der Sie sehen können, dass es beim Vergrößern und Verkleinern einige kleinere Probleme gibt und dass es überhaupt nicht für Mobilgeräte geeignet ist:

https://mitkovtori.github.io/

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

Gibt es also eine Möglichkeit, das Problem bei allen Größen zu beheben oder es für mobile Geräte usw. neu zu erstellen?

Ich habe versucht, den Prozentsatz „%“ zur Darstellung der Größe zu verwenden, zum Beispiel:

<width="25%">

Ich habe auch versucht, Pixel „25px“ zu verwenden. Nur die Zahl „25“.

Aber egal, was ich mache, ich habe immer Probleme beim Vergrößern, Verkleinern und Bewegen des Geräts.

Der Code ist zu 100 % Open Source, Sie können also meinen Mistcode durchgehen und versuchen herauszufinden, wo ich einen Fehler gemacht habe.

Die Repositories der beiden Websites, die ich zu Beginn geteilt habe: https://github.com/MitkoVtori/MitkoVtori.github.io

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

Answer 1

使用媒体查询，例如，如果您想以低于 1023px 的屏幕尺寸设置样式，则需要在 css 文件底部添加如下内容

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

如果您想要低于 768，请再次

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

大屏幕和小屏幕的类似模式