媒體查詢不起作用

-1

我想第一次使用媒體查詢。我腦海中有以下元標記。媒體查詢不起作用

<meta name="viewport" content="width=device-width, initial-scale=1.0">

這是我的HTML。

<p id="quote-box">"Quote."</p>

我在我的CSS中有以下代碼。

#quote-box { 
    background: darkred; 
    width: 100%; 
    color: white; 
    height: 21%; 
} 

@media (min-width:900px){ 

    #quote-box { 
     background: darkred; 
     width: 100%; 
     color: white; 
     height: 10%; 
    } 
}

我不確定該做什麼/做什麼。感謝您提前提出任何建議。

來源

2017-02-15 entry-coder

'@media屏幕和（最小寬度：900px）{'或'@media所有和（最小寬度：900px）{' – Scott

您正在使用媒體查詢正確，您的CSS稍微關閉。

查看代碼段時，以全屏查看並更改窗口寬度。

所以#quote-box會是藍色和小的時候window.width > 900px，否則會變紅，但是很大。

#quote-box { 
 
    background: darkred; 
 
    display: block; 
 
    width: 100%; 
 
    color: white; 
 
    height: 200px; 
 
} 
 

 
@media all and (min-width:900px){ 
 
    #quote-box { 
 
     background: blue; 
 
     width: 100%; 
 
     color: white; 
 
     height: 100px; 
 
    } 
 
}