css-Medientyp im Browser ändern

Question

Gibt es eine Möglichkeit, den Standardmedientyp für einen Browser (sagen wir Chrome) anzugeben, so dass ich css @media-Stile testen kann?

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

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

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

So dass ich (ohne meinen Code zu berühren) die beiden Medientypen im Browser testen könnte? Eine Änderung des Medientyps würde die Farbe des darüber liegenden Divs ändern. Eine Chrome-Erweiterung, ein bisschen Javascript oder eine andere Magie würde sehr geschätzt werden.

Answer 1

Könnte dies das sein, wonach Sie suchen?

Web Developer-Erweiterung für Chrome

Die Webentwickler-Erweiterung hat eine Funktion namens "CSS nach Medientyp anzeigen". Wenn Ihnen das nicht weiterhilft, können Sie immer ein Stylesheet pro Medientyp erstellen und die Anweisung "import css" verwenden, um anzugeben, welcher Typ geladen werden soll:

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

Answer 2

Ilya auf Stackoverflow schrieb diese Antwort Ich fand es einfach und nützlich:

Es gibt eine einfache Möglichkeit, handheld css mit zu testen Mediaabfragen :

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

Danach können Sie auf Browsern, die Media-Queries implementieren, testen, indem Sie Größenänderung des Fensters auf weniger als 500px .

Das ist alles!