Margin-top 以较小的宽度增长

Question

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

#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>