Изменение типа мультимедиа CSS в браузере

Question

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

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

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

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

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

Answer 1

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

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

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

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

Answer 2

Илья в Stackoverflow написал этот ответ , я нашел его простым и полезным:

Существует простой способ тестирования портативных CSS с помощью медиазапросов :

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

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

Вот и все!