网站首页上的图片在移动设备上消失了

Question

将浏览器调整为手机大小/视图时以及在手机上时，我主页上的图片都会消失。

Answer 1

我查看了您的网站，它似乎围绕着您的着陆page.min.css代码中的媒体查询声明。

您两次声明以下查询。在第一块中，您具有以下声明：

@media (min-width:768px){

  .showcase .showcase-img{
   min-height:30rem;
  background-size: cover;
}
}

然后，您将使用完全相同的声明（即@media（min-width：768px））获得一个相同的代码块，但是在标记中没有声明此类。发生的事情是由于CSS的级联性质，这意味着它按顺序执行。

因为这是您的情况，实际上是在清除上面列出的内容，因为未声明它，因此当您将尺寸调整为768px或更小时，图像就会消失。您可以亲自查看是否进行了第一个媒体查询并将其更改为较小的值（例如320px）。然后，您会看到它正确显示。

这实际上已经在SO上得到了回答：

Why does the order of media queries matter in CSS?

说您需要：

1）将您拥有的所有类声明放在一个媒体查询中，而不是两个

2）确定您是否真的需要媒体查询。如果需要，请确保您确实了解响应式设计最佳实践中使用的媒体查询的最大宽度和最小宽度范围。

3）在桌面上的浏览器上，导航回到您的站点并在所有主要浏览器中使用开发人员工具。当您调整大小时，您将能够看到不同的大小，并且当您达到视口大小的断点时，您将能够看到哪些类出现/消失。

在所有建议中，请参阅＃3。浏览器中的开发人员工具功能在诊断您可能遇到的各种CSS / Coding / HTML问题方面非常有用。