在 Chrome 开发者工具中输入 CSS 媒体查询
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28069389/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Enter CSS Media Queries in Chrome Developer Tools
提问by user1506145
Pressing F12 I can instantly change CSS of elements in Chrome. However, I can not input @media screen and (max-width) similar to here:
按 F12 我可以立即更改 Chrome 中元素的 CSS。但是，我无法输入类似于此处的@media screen 和 (max-width)：
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
When I press enter it simply disappears. What can I do to dynamically add and remove media queries?
当我按下回车键时，它就消失了。如何动态添加和删除媒体查询？
回答by BoltClock
When you edit the styles for a specific element in the inspector, it is as though you were editing the element's inline styleattribute: you can only place property declarations such as color: redin your example. This is even reflected in the DOM visualization itself as you edit an element's styles. Media queries don't belong in inline styles, they belong in @mediarules which appear only in a proper stylesheet.
当您在检查器中编辑特定元素的样式时，就好像您正在编辑元素的内联style属性：您只能放置属性声明，例如color: red在您的示例中。当您编辑元素的样式时，这甚至会反映在 DOM 可视化本身中。媒体查询不属于内联样式，它们属于@media仅出现在适当样式表中的规则。
On Chrome, you will need to edit the inspector stylesheet directly in order to include your media queries. You can reach it by going to the Sources panel and choosing inspector-stylesheet.
在 Chrome 上，您需要直接编辑检查器样式表以包含您的媒体查询。您可以通过转到 Sources 面板并选择 inspector-stylesheet 来访问它。
Since this involves writing CSS, you will need to select the element. You can (usually) get a unique CSS selector for the element you choose by right-clicking it in the Elements panel and choosing Copy CSS path.
由于这涉及编写 CSS，因此您需要选择元素。您可以（通常）通过在“元素”面板中右键单击您选择的元素并选择“复制 CSS 路径”来为您选择的元素获取唯一的 CSS 选择器。
Then just write your CSS:
然后只需编写您的CSS：
@media screen and (max-width: 300px) {
/* selector for your element */ { color: red; }
}
回答by Daryl Malibiran
You can use New Style Rule. Click on Plus symbol (+) besides .cls.
您可以使用新样式规则。单击.cls 之外的加号 ( +)。
and then, you'll see it generates new class. Now click on inspector-stylesheet.
然后，你会看到它生成新的类。现在点击inspector-stylesheet。
You will be redirect to Sources Tab with almost blank stylesheet. Now, you can put Media Queries in there.
您将被重定向到带有几乎空白样式表的 Sources 选项卡。现在，您可以将媒体查询放在那里。
回答by Choonkies
You can always add the CSS within style tags in the head section. Just edit the HTML by right-clicking on the html and select "Edit as HTML". For example,
您始终可以在 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>
回答by rmsimpsonau
I had the same problem and finally figured out that when I was entering for example:
我遇到了同样的问题，最后发现当我输入时：
@media (max-width: 767px)
.col-sm-3 {
width: 75%;
}
my screen size was actually more than 767px. So when I pressed enter, it disappeared and seemed to not work. But what I realized is when I adjusted the screen size of my browser to below 768px, I saw the media query in the styles.
我的屏幕尺寸实际上超过 767 像素。所以当我按下回车键时，它消失了，似乎不起作用。但是我意识到当我将浏览器的屏幕尺寸调整到 768px 以下时，我在样式中看到了媒体查询。
