使用媒体查询替换CSS中的单个div

Question

我在一个手机，平板电脑和台式机的网站上工作。这个网站的桌面布局有一个旋转木马，它在html中定义如下：

<div id="carousel">
  <div class="carousel-slide carousel-slide-active">
  </div>
  <div class="carousel-slide">
  </div>
</div>

类旋转木马-幻灯片定义了旋转木马的幻灯片，旋转木马-幻灯片-活动，幻灯片正在显示(由Javascript控制)。

对于移动布局，我不想展示这个旋转木马。我的想法是只显示第一张幻灯片(每一张幻灯片基本上是一个背景颜色和图像)。问题是，我该怎么做？实际上，我正在使用CSS媒体查询来重新排列每个设备中的所有元素，但我不知道如何隐藏所有未使用的幻灯片并禁用Javascript (此javascript控制背景代码(随机)和定位)。用简单的div代替旋转木马的最干净的方法是图像和随机颜色？

Answer 1

你不能禁用JavaScript，除非你的旋转木马插件有一个内置的方法。如果没有，那就没有办法了。

假设所有的旋转木马幻灯片实际上都出现在旋转木马幻灯片激活的div中，您可以这样做：

@media screen and (max-width: 700px) {
  .carousel-slide {
    display: block;
  }
  .carousel-slide.carousel-slide-active: {
    display: none;
  }
}

这将确保您的“活动”div是隐藏的，并显示另一个。active div中的所有html元素也将被隐藏，因为它们的父元素是隐藏的。

如果需要覆盖由!important创建的某些样式，则可以将JavaScript标志添加到这些css属性。在这种情况下，它应该是这样的：

@media screen and (max-width: 700px) {
  .carousel-slide {
    display: block !important;
  }
  .carousel-slide.carousel-slide-active: {
    display: none !important;
  }
}