Изменение типа медиа css в браузере

Есть ли способ указать тип носителя по умолчанию для браузера (скажем, хром), чтобы я мог тестировать стили css @media?

@screen   
{  
    div { background-color:red; }  
}  

@handheld  
{  
     div { background-color:lime; }  
}

<div style="width:100px;height:100px"></div>

Что бы я мог (не касаясь моего кода) тестировать два типа медиа в браузере? Изменение типа носителя изменит цвет div выше. Было бы полезно оценить расширение хром, немного javascript или какую-либо другую магию.

Ответы

Ответ 1

Может ли это быть то, что вы ищете?

Расширение веб-разработчика для Chrome

Расширение веб-разработчика имеет функцию "Показать CSS по типу мультимедиа". Если это вам не поможет, вы всегда можете создать одну таблицу стилей на тип носителя и использовать инструкцию import css, чтобы указать, какой тип загрузить:

@import url("handhelds.css") screen;

Ответ 2

Ilya on Stackoverflow написал этот ответ, мне было легко и полезно:

Там есть простой способ протестировать карманный css с мультимедийными запросами:

    @media handheld, screen and (max-width: 500px) { /* your css */ }

После этого вы можете протестировать в браузерах, которые реализуют медиа-запросы, с помощью изменения размера окна до менее чем 500 пикселей.

Что все!