CSS3媒體查詢似乎沒有工作

Question

我有一個媒體查詢似乎沒有正常工作的問題。

.cl-home h1 
{ 
    font-family: Raleway; 
    position:absolute; 
    top: 20%; 
    left: 10%; 
    font-size: 150px; 
    color: white; 
    border: 1.5px solid white; 
    padding: 10px; 
    @media screen and (max-width: 640px){ 
     font-size: 80px; 
    } 

} 

我認爲與寬度不如640px設備，字體大小會自動改變爲80px。但沒有任何變化。我做錯了什麼或者我不明白媒體查詢是如何工作的？

Answer 1

選擇器都包含在媒體查詢，而不是周圍的其他方式：

.cl-home h1 { 
    font-family: Raleway; 
    position:absolute; 
    top: 20%; 
    left: 10%; 
    font-size: 150px; 
    color: white; 
    border: 1.5px solid white; 
    padding: 10px; 
} 

@media screen and (max-width: 640px) { 
    .cl-home h1 { 
     font-size: 80px; 
    } 
} 

Answer 2

試試這個

.cl-home h1{ 
    font-family: Raleway; 
    position:absolute; 
    top: 20%; 
    left: 10%; 
    font-size: 150px; 
    color: white; 
    border: 1.5px solid white; 
    padding: 10px; 

} 


@media screen and (max-width: 640px){ 
    .cl-home h1{ 
     font-size: 80px; 
    }  
} 

Answer 3

您不能插入一個CSS屬性塊內的媒體查詢。試試這個：

.cl-home h1 
{ 
    font-family: Raleway; 
    position:absolute; 
    top: 20%; 
    left: 10%; 
    font-size: 150px; 
    color: white; 
    border: 1.5px solid white; 
    padding: 10px; 
} 
@media screen and (max-width: 640px){ 
    .cl-home h1 { 
     font-size: 80px; 
    } 
} 

媒體查詢只有在它們的條件被驗證時才定義（並覆蓋）新屬性。