在Chrome开发者工具中输入CSS媒体查询
在Chrome开发者工具中输入CSS媒体查询
提问于 2015-01-21 22:16:58
按下F12 I可以立即改变Chrome中元素的CSS。但是，我不能输入@media screen和(max-width)，如下所示：
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
当我按enter时，它就消失了。如何动态添加和删除媒体查询？
回答 3
Stack Overflow用户
回答已采纳
发布于 2015-01-21 22:31:06
在检查器中编辑特定元素的样式时，就像在编辑元素的内联style属性一样:在示例中只能放置诸如color: red之类的属性声明。当您编辑元素的样式时，这甚至反映在DOM可视化本身中。媒体查询不属于内联样式，它们属于只出现在适当样式表中的@media规则。
在Chrome上，您需要直接编辑检查器样式表，以便包括您的媒体查询。您可以转到“源”面板并选择“检查器-样式表”来访问它。
由于这涉及到编写CSS，因此您需要选择该元素。您可以(通常)获得所选元素的唯一CSS选择器，方法是:在“元素”面板中右键单击该元素，然后选择“复制CSS路径”。
然后只需编写您的CSS：
@media screen and (max-width: 300px) {
/* selector for your element */ { color: red; }
}Stack Overflow用户
发布于 2015-12-16 09:00:50
您总是可以在head部分的style标签中添加CSS。只需右击HTML并选择"Edit as 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>Stack Overflow用户
发布于 2016-04-21 02:22:11
我也遇到了同样的问题，并最终发现当我进入时，例如：
@media (max-width: 767px)
.col-sm-3 {
width: 75%;
}我的屏幕尺寸实际上超过了767px。所以当我按回车键的时候，它消失了，似乎不工作了。但我意识到，当我将浏览器的屏幕尺寸调整到768px以下时，我在样式中看到了媒体查询。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/28069389
复制相关文章
相似问题
腾讯云开发者
