Запросы в средствах массовой информации не работают

Question

Кто-нибудь знает, почему мой запрос на медиа-запросы не работает?

<div class="box"></div> 

.box { 
    background-color: red; 
    width: 100%; 
    height: 50px; 
} 

@media only screen and (max-device-width: 768px) { 
    .box {border: 5px solid blue;} 
} 

http://jsfiddle.net/N9mYU/

Answer 1

Вы бы использовать (max-width: 768px) вместо (max-device-width: 768px). См. Разницу между max-device-width/max-width объяснено here.

Добавить окно просмотра, если вы хотите, чтобы запрос СМИ для работы на мобильных устройствах:

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

UPDATED EXAMPLE HERE

@media only screen and (max-width: 768px) { 
    .box { 
     border: 5px solid blue; 
    } 
} 

Дальнейшее чтение: A pixel is not a pixel/Viewport width and screen width (mdn)

Answer 2

К сожалению люди, но этот вопрос просто стал спорный вопрос : Версия Firefox Dev только что обновила и изменила способ отображения экранов устройств: вы больше не можете выбирать размер экрана b y пиксель с помощью раскрывающегося списка; теперь вам нужно выбрать имя устройства, на котором будут отображаться его размеры.

У меня давно возникли проблемы, когда Firefox выпустил обновление, пока у меня открыт браузер.

Обычный браузер Firefox с firebug теперь более отзывчивый. Некоторые из проблем, с которыми я столкнулся, это то, что когда я устанавливаю предел, такой как «min-width 320px», FDE выполняет только изменение в более крупном мин, скажем 380px. Это не изменяется в обновленной версии.