div的css响应高度或比率[重复]

Question

我想制作一个响应式标题。哪个比率将是 6.1:1 或其他。我知道如何制作响应宽度，但我不知道如何保持比例。我该怎么做？

<div id="master">
  <div id="header">This is header</div>
</div>

css

#master {width:90%;min-height:800px;margin:0 auto}
#header {width:100%; height:150px;background-color:grey}

Answer 1

为什么不使用 CSS 媒体查询？ css-media query in w3school

你可以自己设置标题的比例，比如

<style type="text/css">
@media(max-width: 767px) {
  #master {
    /* your css setting  for smartphone*/
  }
  #header {
   /* your css setting  for smartphone*/
  }
}
@media(min-width: 768px) {
  #master {
    /* your css setting  for tablet(ipad)*/
  }
  #header {
    /* your css setting  for tablet*/
  }
}
@media(min-width: 992px) {
  #master {
    /* your css setting  for laptop*/
  }
  #header {
    /* your css setting  for laptop*/
  }
}
</style>

您可以根据设备的宽度设置自己的比例。

Answer 2

实现此目的的一种方法是使用:before 伪元素来设置高度。这要求其中的所有内容都是position: absolute。这是一个如何做到这一点的例子。 padding-top: 40%; 是比例，基本上是它自己的40%，就是高度。将其更改为您想要的任何内容。

#master {
  width:90%;
  min-height:800px;
  margin:0 auto;
}
#header {
  width:100%;
  background-color: grey;
  position: relative;
}

#header::before {
  content: '';
  display: block;
  padding-top: 40%;
}

#header .content {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  
  padding: 0 20px;
}

<div id="master">
  <div id="header">
    <div class="content">
      This is header
    </div>
  </div>
</div>