Question

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

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

这样做的最佳方法是什么，所以我不必进行大量的媒体查询？谢谢。

Answer 1

你真的需要简化一些事情。你有比你需要更多的元素。你设定了很多高度（似乎并不需要）和一些不重要的风格属性。最后，除了帮助之外，所有人都反对你。

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: