在浏览器中更改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

这会是你要找的东西吗？

Web Developer extension for Chrome

web developer扩展有一个叫做“按媒体类型显示CSS”的功能。如果这对您没有帮助，您可以始终为每个媒体类型创建一个样式表，并使用import css语句指定要加载的类型：

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

Answer 2

Ilya on Stackoverflow写了this answer，我发现它很简单也很有用：

有一个用media queries测试手持css的简单方法：

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

之后，您可以在实现媒体查询的浏览器上进行测试，方法是将窗口大小调整为小于500px的。

就这样!