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

H1标签无响应

1 个答案: