html - H1标签没有响应

Question

我设置了 H1 标签，但它没有响应。我有如下代码，我认为应该可以，但显然不行。

<div class="middle">
        <h1>Cheryl Cox Counselling</h1></div>



body {
font-size: 100%;
}


.middle {
display: flex;
width: 55%;
justify-content: center;
}




h1 {
font-family: 'Great Vibes', cursive;
font-size: 7em;
padding-top: .5em;
color: grey;
text-shadow: -1px -1px 0px rgba(255, 255, 255, 0.3), 1px 1px 0px 
rgba(0, 0, 0, 0.8);
}

Answer 1

下面应该是响应式的。您使用了非常大的字体大小，因此它并没有打破这个词。下面的代码会打破这个词，但为了使字体大小响应，您必须在断点处使用媒体查询。

https://jsfiddle.net/71dfq220/2/

<div class="middle">
  <h1>Cheryl Cox Counselling</h1>
</div>


body {
font-size: 100%;
}


.middle{
  width:100%;
  position:relative;
}

h1 {
font-family: 'Great Vibes', cursive;
font-size: 5em;
white-space:normal;
word-break: break-all;
color: grey;
text-shadow: -1px -1px 0px rgba(255, 255, 255, 0.3), 1px 1px 0px 
rgba(0, 0, 0, 0.8);
text-align:center;
width:100%;
}