需要更改 div 在响应式主题中的位置

Question

Sample Code（我正在受限开发服务器上的 Drupal 站点上工作，但这是文件的静态 html 版本的 link）

我有以下 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中的适当部分，但它似乎只响应区域幻灯片display:none部分。它似乎没有调整位置、顶部或左侧属性。这就是我得到的。

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

Answer 1

you @import you css into html file so it will like internal css and in this case the style will override you media query 因此媒体查询中的样式不会'已接受

你有 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>

需要更改 div 在响应式主题中的位置

Need to change div position in responsive theme

html

css

media-queries

responsive-design