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