Question

我有一个带有margin-top（相对于页面顶部）的框，随着浏览器窗口变小（使用vw）。
但是页面的标题（固定并且在不同的z中） -index）受到最小宽度的限制，所以当它达到1000px时我需要盒子margin-top来停止变小并且星形变大......就像窗口越小，边缘顶部越大。 ..
这是盒子......现在我需要创建一个@media屏幕和（max-width：1000px），它表示相对于大众的高度变大。

#box {
position: relative;
float: left;
width: 100%;
height: auto;
min-height: 350px;
margin-top: 5vw;
}

Answer 1

您可以使用calc()

执行此类操作

<强> Fiddle

header {
  background: black;
  height: 50px;
  width: 100%;
}

main {
  background: green;
  margin-top: 10vw;
  height: 100vh;
}

@media(max-width: 768px) {
  main {
     margin-top: calc(150px - 10vw);
  }
}

<div class="container">
  <header></header>
  <main></main>
</div>

边缘增长，宽度较小

1 个答案: