当浏览器调整为移动尺寸/视图以及在移动设备上时，我主页上的图片会消失。
【问题讨论】：
showcase-img) 不适用于小屏幕。您应该阅读规则并提出更具建设性的问题
标签： javascript php html css web
我查看了您的网站，它似乎围绕着您在landing-page.min.css 代码中的媒体查询声明展开。
您将两次声明以下查询。在第一个块中，您有以下声明：
@media (min-width:768px){
.showcase .showcase-img{
min-height:30rem;
background-size: cover;
}
}
然后你有一个相同的块，使用完全相同的声明（即@media (min-width:768px)），但你没有在标签中声明这个类。发生的事情是因为 CSS 的级联特性，这意味着它是按顺序执行的。
因为您就是这种情况，实际上是在清除上面列出的内容，因为它没有被声明，因此当您将大小调整为 768 像素或更小时，您的图像会消失。如果您进行第一个媒体查询并将其更改为较小的值（例如 320 像素），您可以自己查看。然后您会看到它显示得有些正确。
这实际上已经在 SO 上得到了回答：
Why does the order of media queries matter in CSS?
也就是说你需要：
1）将您拥有的所有类声明放在一个媒体查询中，而不是两个
2）确定你是否真的需要媒体查询。如果您这样做，您需要确保您真正了解响应式设计最佳实践中使用的媒体查询的最大宽度和最小宽度范围。
3) 在您桌面上的浏览器上，导航回您的站点并在所有主要浏览器中使用开发人员工具。您将能够在调整大小时看到不同的大小，并且当您点击视口大小断点时，您将能够看到哪些类出现/消失。
在所有建议中，请参阅#3。浏览器中的开发人员工具功能在诊断您可能遇到的各种 CSS/编码/HTML 问题方面非常有用。
【讨论】：