如何使 CSS 轮廓匹配动态元素高度答案

【问题标题】：How to make CSS outline match dynamic element height如何使 CSS 轮廓匹配动态元素高度
【发布时间】：2017-09-25 16:46:59
【问题描述】：

我在这个页面的页眉中有一个大纲：https://despeaux.consulting/larryhooke/landing/

我使用媒体查询使用 vw 更改标题文本大小，但我无法弄清楚如何使插入轮廓匹配以舒适地适应。

最好的方法是什么，这样我就不必进行大量媒体查询了？谢谢。

【问题讨论】：

标签： jquery css dynamic outline

【解决方案1】：

您确实需要简化事情。你有比你需要的更多的元素。您设置了很多高度（似乎不需要）和一些无关紧要的样式属性。最终，这一切都对你不利，而不是帮助。

下面是您可以做什么的简化演示。最终它是一个块级元素，具有规则的边距、边框和一些内边距的文本。它根据内容的大小调整大小。通过媒体查询根据需要调整字体大小。

body {
  margin: 0;
  background-color: indianred;
}

header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
}

.brand {
  display: block;
  margin: 3vw;
  padding: 2rem;
  color: white;
  font-size: 4vw;
  text-align: center;
  text-decoration: none;
  border: 1px solid white;
}

.brand h1,
.brand h2 {
  margin: 0;
}

.brand h2 {
  font-size: 2vw;
}

.hero {
  height: 100vh;
  background-image: url( 'http://placehold.it/1600x1600/fc0' );
  background-repeat: no-repeat;
  background-size: cover;
}
.hero img {
  display: block;
  height: inherit;
  max-width: 100%;
}

<header>

  <a class="brand" href="#">
    <h1>Heading</h1>
    <h2>Sub Heading</h2>
  </a>
  
</header>
<main>
  
  <div class="hero"></div>
  
  <div>
  
    <p>
      Lorem ipsum dolor.
    </p>
  
    <p>
      Lorem ipsum dolor.
    </p>
  
    <p>
      Lorem ipsum dolor.
    </p>
  
    <p>
      Lorem ipsum dolor.
    </p>
    
  </div>
  
</main>

【讨论】：

谢谢！我能够使用您的想法使其工作。真的很感激。