html - 需要更改响应主题中的 div 位置

Question

Sample Code (我正在受限开发服务器上的 Drupal 站点上工作，但这是指向该文件的静态 html 版本的链接)

我有以下 css 生成第一张图片中的页面。

#slideshow_block {
  position: relative;
  min-height: 280px;
}

#slideshow_floater {
  position: absolute;
  top: 20%;
  left: 10%;
  width: 55%;
  height: 40%;  
}

如果我按如下方式修改代码，那么我会得到下一张图片中的页面。

.region-slideshow {
  display: none;
}

#slideshow_block {
  position: relative;
}

#slideshow_floater {
  position: relative;
  top: 1px;
  left: 1px;
  width: 100%;
  height: 40%;  
}

我想要做的是让页面像屏幕尺寸大于 640 像素的第一张图片一样。然后，一旦屏幕尺寸低于 640px，隐藏背景中的幻灯片，并使搜索框全宽类似于第二张图片中的宽度。 我已将这两段 CSS 代码添加到媒体 CSS 中的相应部分，但它似乎只响应 region-slideshow display:none 部分。它似乎没有调整位置、顶部或左侧属性。这就是我得到的。

有什么帮助吗？提前致谢。

Answer 1

你将你的 css @import 到 html 文件中，这样它就像内部 css 一样，在这种情况下，样式将覆盖你的媒体查询，因此你在媒体查询中的样式不被接受

你有 2 个选项，首先你可以在媒体查询中将 !important 添加到 #slideshow_floater

@media screen and (max-width: 640px)
  #slideshow_floater {
    position: relative !important;
    top: 1px !important;
    left: 1px !important;
    width: 100% !important;
    height: 40% !important;
  }
}

或者对我来说最好的是在导入 css 文件时重新排列它们。现在你像这样导入它们:

<style type="text/css" media="all">
    @import url("files/font-awesome.css?o7n8rh");
    @import url("files/style.css?o7n8rh");
    @import url("files/media.css?o7n8rh");
    @import url("files/ksu.css?o7n8rh");
</style>

你只需要让 media.css 成为最后一个文件，这样它的样式就不会被覆盖

<style type="text/css" media="all">
    @import url("files/font-awesome.css?o7n8rh");
    @import url("files/style.css?o7n8rh");
    @import url("files/ksu.css?o7n8rh");
    @import url("files/media.css?o7n8rh");
</style>