媒体查询不起作用

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