为什么我的 Bootstrap 和媒体查询没有响应

Question

我有这些问题，当我将我的网络转换为移动模式时，它会缩放整个页面并在右边从上到下留下白色 space，请问我该如何解决这个问题。

这是 link 我的网站 https://juvielone.github.io/Juvie/

移动模式下的白色 space 图像：

Answer 1

您的 .prof-pic 图片宽度设置为 21.875rem，即 350px (21.875*16px)。结合 #about-me 和 .col-lg-6 上的填充，该元素将超出许多移动设备宽度的界限。

解决方案 1：使用媒体查询在移动设备上设置较小的尺寸。

例如

.prof-pic {
    width: 13.875rem;
    height: 13.875rem;
}

@media (min-width: 576px) {
    width: 21.875rem;
    height: 21.875rem;
}

解决方案 2：使图像响应

由于您使用的是 Bootstrap 4，因此您可以在 .prof-pic 上使用助手 class .img-fluid 使图像流畅（最大宽度：100%） .由于您希望图像具有一致的比例，因此您还需要裁剪图像以使其成为正方形。这也有助于图像失真。