Header 响应问题

Question

我正在尝试为网站制作 header，但在高度响应方面遇到问题。

我不确定它是否可以通过媒体查询断点来解决，如下图所示。

这是完整版 window

的样子

Html

 <body>
    <header class="header"> 
       <div class="logo-box"></div>
       <img src="/img/logo-white.png" class="logo">
       <div class="text-box">
          <h1 class="heading-primary">
             <span class="heading-primary-main">City</span>   
             <span class="heading-primary-sub">is where life happens</span>   
          </h1>
          <a href="#" class="btn btn-white">Discover our City</a>
          <a href="#" class="btn btn-white">Discover our Tours</a>
       </div> 
    </header>
 </body>

CSS

*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}

body{
    font-family: "Lato", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.7;
    color: #777;
}

.header{
    height:65vh;
    background-image: linear-gradient(to right  bottom, rgba(132,248,198 , 0.8), rgba(26,187,137,0.8)),url(../img/ch4.jpg);
    background-size: cover;
    background-position: top;
    background-color:#4FD1A9;
}
.logo-box{
    position: absolute;
    top:40px;
    left:40px;
}

.logo{
    height:35px;
}

.heading-primary {
    color:#fff;
    text-transform: uppercase;
}

.heading-primary-main{
    display: block;
    font-size: 60px;
    font-weight: 400;
    letter-spacing: 35px;
}

.heading-primary-sub {
    display: block;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 15px;
    margin-bottom: 60px;
}

.text-box {
    display: inline-block;
    position: absolute;
    top:30%;
    left:50%;
    transform: translate(-50% ,-50%);
    text-align: center;
    
   
}

.btn:link, 
.btn:visited {
    text-transform: uppercase;
    text-decoration: none;
    padding:15px 40px;
    display: inline-block;
    border-radius: 100px;
    transition: all .2s;
    margin: 5px;
}

.btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 10px rgb(0,0,0,.2);
}

.btn:active {
    transform: translateY(-1px) ;
}

.btn-white {
    background-color: #fff;
    color:#777;
}

我是否应该使用 CSS 网格布局将整个 header 拆分成自己的部分？

Answer 1

使用media-quires调整布局。

由于 position:absolute

出现问题

Reference

*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}

body{
    font-family: "Lato", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.7;
    color: #777;
}

.header{
    height:65vh;
    background-image: linear-gradient(to right  bottom, rgba(132,248,198 , 0.8), rgba(26,187,137,0.8)),url(../img/ch4.jpg);
    background-size: cover;
    background-position: top;
    background-color:#4FD1A9;
}
.logo-box{
    position: absolute;
    top:40px;
    left:40px;
}

.logo{
    height:35px;
}

.heading-primary {
    color:#fff;
    text-transform: uppercase;
}

.heading-primary-main{
    display: block;
    font-size: 60px;
    font-weight: 400;
    letter-spacing: 35px;
}

.heading-primary-sub {
    display: block;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 15px;
    margin-bottom: 60px;
}

.text-box {
    display: inline-block;
    position: absolute;
    top:30%;
    left:50%;
    transform: translate(-50% ,-50%);
    text-align: center;
    
   
}

.btn:link, 
.btn:visited {
    text-transform: uppercase;
    text-decoration: none;
    padding:15px 40px;
    display: inline-block;
    border-radius: 100px;
    transition: all .2s;
    margin: 5px;
}

.btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 10px rgb(0,0,0,.2);
}

.btn:active {
    transform: translateY(-1px) ;
}

.btn-white {
    background-color: #fff;
    color:#777;
}
@media only screen and (max-width: 767px) {
  .header {
       height: 100vh;//adjust as per your req
  }
  .text-box {
    display: block; 
    position: relative;
    top: 0;
    left: 0;
    transform: none;
    text-align: center;
    height: 100%;
}
}

<body>
    <header class="header"> 
       <div class="logo-box"></div>
       <img src="/img/logo-white.png" class="logo">
       <div class="text-box">
          <h1 class="heading-primary">
             <span class="heading-primary-main">City</span>   
             <span class="heading-primary-sub">is where life happens</span>   
          </h1>
          <a href="#" class="btn btn-white">Discover our City</a>
          <a href="#" class="btn btn-white">Discover our Tours</a>
       </div> 
    </header>
 </body>

Answer 2

我的解决方案有点自以为是，但我认为对于这种问题来说这是不可避免的，因为有很多不同的方法可以完成。

我认为元素的高度应该只由它们的内容决定。如果用户在水平和垂直滚动网站时都感到舒服，那么响应式设计将是一个完整的 non-issue。响应式设计只是变得必要因为我们阻止了水平滚动。因此，我们不应该关心内容的高度，而只关心宽度。

因此，我从 header 中删除了固定高度，并从一些元素中删除了绝对定位，并允许内容根据自然流进行布局。对于桌面，我认为这很好用。

较窄的屏幕需要稍微不同的方法，因为在这些屏幕上您确实开始遇到内容宽度的问题。我的解决方案是在内容开始变得对视口来说太宽时引入 break-point。然后我将所有尺寸 - font-sizes、边距、填充等 - 设置为当前视口宽度的一部分。这里需要一点数学来计算正确的值，我还使用了 CSS 自定义属性来使事情变得更干燥。事实上，媒体查询中只有一个声明，那就是设置base-unit，所有其他值都是从中计算出来的。

我在 CSS 中做了笔记，给出了我所做的一些更改的原因。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.7;
  color: #777;
}

.header {
  --unit: 1px;
  /*  removing this since the height of an element should be determined by content */
  /* height:65vh;*/
  background-image: linear-gradient(to right bottom, rgba(132, 248, 198, 0.8), rgba(26, 187, 137, 0.8)), url(https://s.abcnews.com/images/Business/gty_detroit_mi_130718_4x3_992.jpg);
  background-size: cover;
  background-position: center;
  background-color: #4FD1A9;
  /*
   * flexbox is the best way to layout content along a single axis
   * for various practical and performance reasons
   */
  display: flex;
}

.text-box {
  --padding-v: calc(var(--unit) * 50);
  --padding-h: calc(var(--unit) * 10);
  display: inline-block;
  padding: var(--padding-v) var(--padding-h);
  /* This content should just be in the normal flow of the page */
  /*
    position: absolute
    top:30%;
    left:50%;
    transform: translate(-50% ,-50%);
  */
  text-align: center;
  /*  Because we're using flexbox, we can center the content both horizontally and vertically
   *  using this declaration
   */
  margin: auto;
}

.heading-primary {
  color: #fff;
  text-transform: uppercase;
}

.heading-primary-main {
  --font-size: calc(var(--unit) * 60);
  --letter-spacing: calc(var(--unit) * 35);
  display: block;
  font-size: var(--font-size);
  font-weight: 400;
  letter-spacing: var(--letter-spacing);
}

.heading-primary-sub {
  --font-size: calc(var(--unit) * 20);
  --letter-spacing: calc(var(--unit) * 15);
  --margin-bottom: calc(var(--unit) * 60);
  display: block;
  font-size: var(--font-size);
  font-weight: 700;
  letter-spacing: var(--letter-spacing);
  margin-bottom: var(--margin-bottom);
}

.btn {
  --padding-v: calc(var(--unit) * 15);
  --padding-h: calc(var(--unit) * 40);
  --border-radius: calc(var(--unit) * 100);
  --margin: calc(var(--unit) * 5);
  --font-size: calc(var(--unit) * 16);
  font-size: var(--font-size);
  text-transform: uppercase;
  text-decoration: none;
  padding: var(--padding-v) var(--padding-h);
  display: inline-block;
  border-radius: var(--border-radius);
  transition: all .2s;
  margin: var(--margin);
  background-color: #fff;
  color: #777;
}

.btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 10px rgb(0, 0, 0, .2);
}

.btn:active {
  transform: translateY(-1px);
}


/*
 * This is around the point at which the text starts to wrap
 * 
 * We take a fundamentally different approach to layout here. Now we want dimensions to
 * scale with the width of the viewport so that it will look good at all sizes
 */

@media only screen and (max-width: 550px) {
  .header {
    --unit: calc(100vw / 550);
  }
}

<html>

<head>
  <link href="./header.css" rel="stylesheet" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  <header class="header">
    <div class="text-box">
      <h1 class="heading-primary">
        <span class="heading-primary-main">City</span>
        <span class="heading-primary-sub">is where life happens</span>
      </h1>
      <a href="#" class="btn">Discover our City</a>
      <a href="#" class="btn">Discover our Tours</a>
    </div>
  </header>
</body>

</html>

Header 响应问题

Header Responsiveness issue

html

css

css-transitions

responsive-design