响应能力和 css-grid 和 flexbox

Question

无论我多么努力地尝试我的网站响应移动设备。但我做不到，我不知道自己做错了什么。帮助我学习如何制作响应式网站。

我试着做一些网站

存储库-1：https://github.com/nasershareef/Practice-Frontend-Dev-8

站点链接-1：https://nasershareef.github.io/Practice-Frontend-Dev-8/

存储库 2：https://github.com/nasershareef/Practice-Frontend-Dev-7

站点链接 2：https://nasershareef.github.io/Practice-Frontend-Dev-7/

我搞砸了尺寸

网格

弹性盒子

没有任何效果 我的网站没有响应 我不知道该怎么办

Answer 1

当我从 Chrome DevTools 和移动视图中的链接打开您的网站时，网站看起来很好，那么问题出在哪里？

Answer 2

在我看来，您的第一个网站看起来完全不错。我打开它并使用 DevTools 检查了它，但如果您有其他期望，请详细说明。

谈到第二个站点，您使用了一张图片，并且在减小屏幕尺寸后，您的图片仅缩小了一维。它没有保持其纵横比。为此，您可以设置width: 100% 和height: auto。如果这有效，请告诉我。