CSS Тип носителя и запросы не работают

Я имею этот CSS стиль, который я пытаюсь запустить на хромированной V28, Firefox V222 и IE8:CSS Тип носителя и запросы не работают

html, body{ 
      margin: 36px; 
      width: 100%; 
      background-color: black; 
     } 

     @media screen and (max-width: 768px){ 
      html, body{ 
       width: 100%; 
       height: 100%; 
      } 

      #page { 
       margin: 20px; 
       width: 100%; 
       background-color: red; 
      } 
     }

и как разметка добавить:

<!DOCTYPE html> 
<html> 
<head></head> 
<body><div id="page"></div></body> 
</html>

Просто хочу понять, почему он не меняет цвет на красный, если я минимизирую окно.

Любая помощь будет полезной.

Благодаря Раджа

источник

2013-07-28 RAJA MALIK

изменить этот экран @media и (max-width: 768px) "к этому" @media (max-width: 768px) " –

#page не имеет никакого содержания, таким образом, он имеет height:0px; Попробуйте следующее: (working jsFiddle)

@media screen and (max-width: 768px){ 
    html, body{ 
     width: 100%; 
     height: 100%; 
    } 

    #page { 
     margin: 20px; 
     width: 100%; 
     height:100%; /* set the height */ 
     background-color: red; 
    } 
}

Что касается того вопроса - изменение фона - Вам придется отменить порядок CSS следующим образом:

<style> 

html, body{ 
    margin: 36px; width: 100%; height: 100%; 
} 
body{ background-color: black; } /* This should be first for the media query to override */ 

@media screen and (max-width: 768px){ 
    html, body{ margin: 20x; } 
    body{ background-color: red; } /* When the media query is applied this overrides the previous rule */ 
} 

</style>

источник

2013-07-28 17:31:49

Спасибо. Это сработало. Но, что, если я удаляю div и хочу изменить фоновый цвет тела на основе медиа-запроса. Как: ' \t \t ' –

@RAJAMALIK upadted с новым требованием –

CSS Тип носителя и запросы не работают

ответ

Смежные вопросы