在Chrome开发者工具中输入CSS媒体查询

Question

按F12我可以立即更改Chrome中元素的CSS.但是,我不能输入@media屏幕和(max-width)类似于这里:

http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

当我按下输入它只是消失.如何动态添加和删除媒体查询？

Answer 1

在检查器中编辑特定元素的样式时,就像编辑元素的内联style属性一样:您只能放置属性声明,例如color: red在您的示例中.在编辑元素的样式时,甚至可以在DOM可视化本身中反映出来.媒体查询不属于内联样式,它们属于@media仅出现在适当样式表中的规则.

在Chrome上,您需要直接编辑检查器样式表才能包含媒体查询.您可以转到"源"面板并选择"检查器 - 样式表"来访问它.

由于这涉及编写CSS,因此您需要选择元素.您可以(通常)为您选择的元素获取一个唯一的CSS选择器,方法是在"元素"面板中右键单击它,然后选择"复制CSS路径".

然后写你的CSS:

@media screen and (max-width: 300px) {
    /* selector for your element */ { color: red; }
}

Answer 2

您可以使用“ 新样式规则”。单击.cls之外的加号（+）。

然后，您将看到它生成了新类。现在，单击inspector-stylesheet。

您将使用几乎空白的样式表重定向到“源”选项卡。现在，您可以在其中放置媒体查询。

Answer 3

您始终可以在head部分的样式标记中添加CSS.只需右键单击html即可编辑HTML,然后选择"编辑为HTML".例如,

<style>
    @media screen and (min-width: 0px) and (max-width: 400px) {
        body {
            background-color: red;
        }
    }
    @media screen and (min-width: 401px) and (max-width: 599px) {
        body {
            background-color: green;
        }
    }
    @media screen and (min-width: 600px) {
        body {
            background-color: blue;
        }
    }
</style>