在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

您始终可以在head部分的样式标记中添加CSS。只需通过右键单击html编辑HTML，然后选择＆＃34;编辑为HTML＆＃34;。例如，

<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>

Answer 3

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

，然后，您将看到它生成新类。现在，点击检查器样式表。 View Screenshot 您将使用几乎空白的样式表重定向到“源”选项卡。现在，您可以在其中放置媒体查询。 View Screenshot

Answer 4

我遇到了同样的问题，最后在我输入时想到了：

@media (max-width: 767px)
.col-sm-3 {
  width: 75%;
}

我的屏幕尺寸实际上超过767px。因此，当我按下回车时，它消失了，似乎无法正常工作。但我意识到当我将浏览器的屏幕尺寸调整到768px以下时，我看到了样式中的媒体查询。