使页面适合移动设备吗？

Question

我有很多网页和一些网站。问题是，我是一个初学者。我使用基本的 html5 和 css3，但我不知道如何使它们放大、缩小并且适合移动设备。例如，这是我的页面之一和我的网站之一，您可以在其中看到放大和缩小时存在一些小问题，而且根本不适合移动设备：

https://mitkovtori.github.io/

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

那么，有没有办法修复所有尺寸的问题，或者为移动设备重新创建等等？

我尝试使用百分比“%”来表示尺寸，例如：

<width="25%">

我也尝试过使用像素“25px”。 只有数字“25”。

但无论我做什么，放大、缩小和移动设备总是会出现问题。

代码是100%开源的，所以你可以绕过我的垃圾代码并尝试找出我的错误在哪里。

我在开头分享的两个网站的存储库： 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;
        }
    }

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