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

Question

按 F12 我可以立即更改 Chrome 中的 CSS 个元素。但是，我无法输入类似于此处的@media screen 和 (max-width)：

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

当我按下回车键时，它就消失了。如何动态添加和删除媒体查询？

Answer 1

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

在 Chrome，您将需要直接编辑检查器样式表以包含您的媒体查询。您可以通过转到“源”面板并选择 inspector-stylesheet 来访问它。

由于这涉及写 CSS，您将需要 select 元素。您可以（通常）获得一个独特的 CSS select 或您选择的元素，方法是在“元素”面板中右键单击它并选择“复制 CSS 路径。

然后写下你的CSS:

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

Answer 2

您始终可以在标题部分的样式标签内添加 CSS。只需在 html 和 select "Edit as HTML" 上通过 right-clicking 编辑 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>

Answer 3

我遇到了同样的问题，最后弄明白了，当我进入例如：

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

我的屏幕尺寸实际上超过了 767px。所以当我按下回车键时，它消失了，似乎不起作用。但是我意识到当我将浏览器的屏幕尺寸调整到 768px 以下时，我在样式中看到了媒体查询。

Answer 4

您可以使用新样式规则。单击 .cls.

旁边的加号 (+)

然后，您会看到它生成新的 class。现在点击 inspector-stylesheet.

您将被重定向到带有几乎空白样式表的“来源”选项卡。现在，您可以将媒体查询放在那里。

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

Enter CSS Media Queries in Chrome Developer Tools

css

media-queries

google-chrome-devtools