Cambiar el tipo de medio css en el navegador

Question

¿Hay alguna forma de especificar el tipo de medio predeterminado para un navegador (digamos chrome), para que pueda probar los estilos css @media?

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

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

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

Tal que podría (sin tocar mi código) probar los dos tipos de medios en el navegador? Cambiar el tipo de medio cambiaría el color del div anterior. Una extensión de cromo, un poco de javascript u otra magia sería muy apreciada.

Answer 1

¿Podría ser esto lo que estás buscando?

Web Developer extension for Chrome

La extensión desarrollador web tiene una característica llamada "Pantalla CSS por tipo de medio". Si esto no le ayuda, siempre se puede hacer una hoja de estilo según el tipo de medios de comunicación y el uso de la declaración de importación CSS para especificar qué tipo de carga:

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

Answer 2

Ilya en Stackoverflow escribió this answer, me resultó fácil y útil:

Hay una manera simple de probar css de mano con la media queries:

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

Después de que se puede probar en los navegadores que implementan preguntas de los medios por cambiar el tamaño de la ventana a menos de 500 píxeles.

¡Eso es todo!