响应式边距和填充答案

【问题标题】：Responsive margins and padding响应式边距和填充
【发布时间】：2014-01-30 06:46:29
【问题描述】：

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

http://abezieleniec.com/SIDWeb/

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

谢谢

【问题讨论】：

一些建议是您的图像和任何固定宽度应该基于百分比，填充和边距通常不会。文本应该跟在 EM 后面，我会阅读字体响应性，这大约需要 1-2 小时来消化人们想到的所有不同方法。
@Cam 感谢您的信息，我会调查一下

标签： javascript html css fluid-layout

【解决方案1】：

这个过程并不难，因为它发生了！这是我必须用于网站的东西：http://flourishworld.co.uk/

关键是使用 :before 和 "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。

【讨论】：