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

Question

我有这样的问题，当我的网页转换成移动模式时，会把整个页面放大，从上到下在右边留白，请问如何解决这个问题。

下面是我网站的链接 https:/juvielone.github.ioJuvie。

移动模式下留白的图片。

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，你可以使用帮助类 .img-fluid 关于 .prof-pic 以使图像流畅（最大宽度：100%）。由于你希望图像有一个一致的比例，你还需要裁剪你的图像，使其成为一个正方形。这也将有助于解决图像失真问题。