如何解决简单 html/css 网站在移动设备上的缩放问题

Question

我最近创建了一个网站，作为我在大学期间完成的任何未来项目的各种组合。我 self-taught 自己 Html/CSS 创建了 web-page 所以显然代码本身的质量可能很差。当我学习 React.js 时，我可能会创建一个新网站，但现在这就是我所拥有的。

link是：https://etnwang.github.io/

文件可以在https://github.com/eTNwang/eTNwang.github.io

找到

我认为该页面在桌面上看起来还不错，但在移动设备上就完全崩溃了。我尽可能使用宽度和高度的百分比，并使用 vh 而不是 px。然而，它看起来仍然很可怕。我添加了行

    <meta name="viewport" content="width=device-width, initial-scale=1">

但它对站点没有任何作用。

有人知道如何解决移动缩放问题吗？

在桌面上：

看起来不错：

在手机上：

可怕

Answer 1

您在开始时得到了一个很好的设置，您可以在其中使用 flex 将元素放置在两个不同的块中。 Nameblock 为 60% 宽度，你的图像为 40% 宽度。然而，这在移动设备上变得非常小。当 window 小于 600px（例如）时，我建议在您的情况下添加不同的弯曲方向。然后根据您想要放置图像的位置更改您的填充。

@media (max-width:600px){ 
    .flex-container {
     flex-direction: column;
  }
.img img{ 
     padding-left: 15vh;
  } 
.nameblock{
     width:90%;
     margin: auto;
     padding-left:0;
  }
}