Question

我想让我的页面的某些元素在缩小尺寸时具有更多流畅的过渡。如果你看这里：

您可以看到，当您缩小平板电脑和手机尺寸时，第一个蓝色条会捕捉到不同的位置以与主徽标相遇。这显然是通过媒体查询来完成的，但我想知道是否有办法让它在百分比方面变得更加流畅？我假设这需要一些JS ...... 欢迎任何想法！

由于

Answer 1

这个过程并不太难！这是我在网站上使用的内容：http://flourishworld.co.uk/

关键是使用：之前使用“margin-top：xx％”：

.element:before  {
  margin-top: 50%;
  position: relative;
  content: "";
  display: block;
}

从查看您的网站...可能更容易呈现一些更改的代码。首先，我改变了你的标记（这可能不适合你）

<div id="home" class="jumbotrontop animated fadeIn">
  <div class="biglogo" style="opacity: 1;">
    <img src="images/biglogofull.png">
  </div>
</div>

使用上面的代码构思：

#home:before {
  margin-top: 55%;
  position: relative;
  content: "";
  display: block;
}

但要实现这一点，你需要为其他元素修改一些CSS代码......

.jumbotrontop {
  font-size: 21px;
  height: 100%;
  line-height: 2.1428571435;
  color: inherit;
  width: 100%;
  background-size: cover;
  z-index: 1;
}

.biglogo {
  width: 80%;
  display: block;
  margin-left: 10%;
  margin-right: 10%;
  margin-top: 10%;
  margin-bottom: 130px;
  opacity: 1;
  position: absolute;
  z-index: 100;
  top: 0;
  position: relative;
  display: table;
}

.jumbotrontop img {
  width: 100%;
  height: auto;
  margin: auto;
  max-width: 740px;
  display: block;
}

#home:after {
  background-color: #eeeeee;
  background-image: url(../images/background1.jpg);
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  content: "";
  bottom: 0;
  right: 0;
  z-index: 1;
  background-size: cover;
}

这样做是需要你的顶级元素并将它的高度带走，它的内容绝对定位，因此它不会占用空间。：before元素然后添加一个响应高度，随着页面宽度的缩小而缩小。在这样做时，我们不得不改变徽标标记，使其保持在中心位置并继续缩小窗口。

希望这有帮助！没有JS，所有CSS。

响应边距和填充

1 个答案: