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

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

为什么不使用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>

您可以按设备的宽度设置自己的比率。

css响应高度或div的比率

2 个答案: