响应式网站在 Firefox 响应模式下可以正常工作，但在 Chrome 或设备中不行

Question

我为自己建立了一个网站，根据我对 Firefox 响应模式的测试，我认为该网站具有响应性。我用 iPhone 分辨率 (375*667) 横向和纵​​向模式测试了所有页面，效果很好。

但是，当我尝试在 Chrome 中打开同一个网站时，它无法正常显示。从 iPhone 上观看时，它也显示出相同的效果。

这是我的网站 - http://v1chu.github.io/

第 2 节和第 3 节中使用的背景图片缺失，但它在 Firefox 中运行良好（也在响应模式下）。我也看不到设备中的背景。

此外，在 Chrome 和设备中查看时，网站内容看起来非常小。但在 Firefox 中查看时看起来还不错。

请告诉我我建立网站的方式是否正确？或者，如果我遗漏了某些内容，导致 Chrome 和设备上的网站混乱。

Answer 1

你正朝着正确的方向前进。

问题 #1，背景图片

您的背景图片未显示，因为您使用的是值为fixed 的background-attachment 属性。它设置与视口（浏览器窗口）相关的背景。您基本上是将背景图片固定在页面顶部，当您到达第二和第三部分时，您已经滚动过了背景图片。

您已通过简写 background 属性设置了 background-attachment。从background 属性中删除fixed。

background: url( '../img/aboutme.jpg' ) no-repeat center;

问题 #2，文字大小

您需要使用响应式元标记。这是我使用的一个：

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Answer 2

问题似乎出在这里：

.s2 {

background: url(../img/aboutme.jpg) no-repeat center fixed;

}

我删除了固定和在chrome中显示的背景

s2 {

background: url(../img/aboutme.jpg) no-repeat center;

}