爲什麼在這個例子中媒體查詢不改變字體大小？

我已閱讀相關問題，但仍未找到答案。我試圖儘可能簡化並仍然得到意想不到的結果。爲什麼在這個例子中媒體查詢不改變字體大小？

我的媒體查詢不改變元素的字體大小，儘管它會改變顏色沒有問題。誰能解釋這種行爲？

例如。

<!DOCTYPE html> 
<html> 
<head> 
<title>DISOBEDIANT HEADER</title> 
<meta charset="utf-8" /> 
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/> 
<meta name="viewport" content="width=device-width, initial-scale=1"/> 

<style type="text/css"> 

    @media all and (max-width: 400px) { 
     h1 { 
      color: blue; 
      font-size:26px; 
     } 
    } 

    h1 { 
     font-size: 56px; 
    } 

</style> 

</head> 
<body> 

    <h1>DISOBEDIENT HEADER</h1> 

</body> 
</html>

來源

2015-11-08 Jonathan McLaren

您有兩個更改字體大小的規則集。

它們具有相同的選擇器，因此具有相同的特定性。

因此，最後聲明的將始終應用。

因此，要麼：

的寬度比400像素較多，所以將字體大小設置爲56px
寬度爲400像素或更小，所以字體大小設置爲26px，然後立即改變到56px

更改規則集的順序（或在媒體查詢中使用更具體的選擇器）。

來源

2015-11-08 17:55:17 Quentin

謝謝！我完全忘了特異性。問題解決了！ –

爲什麼在這個例子中媒體查詢不改變字體大小？

回答

相關問題