时间戳

首页 > 解决方案 > 网站主页上的图片在手机上消失

javascript - 网站主页上的图片在手机上消失

问题描述

当浏览器调整为移动尺寸/视图以及在移动设备上时，我主页上的图片会消失。

标签： javascriptphphtmlcssweb

解决方案

我查看了您的网站，它似乎围绕着您在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 之前得到了回答：

为什么媒体查询的顺序在 CSS 中很重要？

也就是说，您需要：

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

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

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

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

推荐阅读