不叫媒體查詢

Question

任何人都可以看到爲什麼這個媒體查詢不起作用嗎？ CSS .header-x1的第一部分工作正常。但是我想在最大寬度爲768px時更改字體大小。但是當我在這裏運行我的代碼時沒有任何反應任何人都可以看到爲什麼？

<p class="header-xl"> 
    This is a test 
</p 

.header-xl { 
    font-weight: 900; 
    font-size: 5em; 
    line-height: 1; 
    text-transform: uppercase; 
    color: #fff; 
    padding-top: 160px; 
    } 

@media(max-width:768px) { 
    header-xl { 
     font-size: 8px; 
    } 

Answer 1

您缺少a。在媒體查詢類，而不是頭-XL加.header-XL

@media(max-width:768px) { 
    .header-xl { 
     font-size: 8px; 
    } 

Answer 2

從外觀上來看，你需要.header-xl不header-xl媒體查詢

Answer 3

變化header-xl到.header-XL內

@media(max-width:768px) { 
    .header-xl { 
     font-size: 8px; 
    } 
}