使页面对移动设备友好?

Question

我有很多网页，也有一些网站。问题是，我是个乞丐。我使用基本的html5 &css3，我不知道如何让它们放大，缩小和移动友好。例如，这是我的一个页面和我的一个网站，在这里你可以看到放大和缩小有一个小问题，它根本不适合移动设备:

https://mitkovtori.github.io/

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

那么，有没有一种方法来修复它的所有尺寸，或者像重新创建移动等?

我试着用百分号"%"对于大小，例如:

& lt;宽度="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;
}
} 

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