Запросы для СМИ не работают

Question

Я пытаюсь использовать медиа-запросы в первый раз. У меня есть следующий метатег в моей голове.

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

Я не уверен, что делать/делать. Благодарим за любые предложения заранее.

Answer 1

Вы используете медиа-запрос правильно, ваш 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; 
 
    } 
 
}

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

Answer 2

вы забыли указать тип носителя. см.: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Answer 3

Непонятно, о чем вы спрашиваете ... но со средствами массовой информации, я считаю, что вам нужно только добавить атрибуты, которые будут меняться/отличаться от оригинала. Таким образом, с вашим примером выше единственное, что меняется с оригинала, - это атрибут height. Может быть, это проверка для получения дополнительной помощи:

https://www.w3schools.com/css/css3_mediaqueries.asp

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries