首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >在Chrome开发者工具中输入CSS媒体查询

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

Stack Overflow用户
提问于 2015-01-21 22:16:58
回答 3查看 37.3K关注 0票数 42

按下F12 I可以立即改变Chrome中元素的CSS。但是,我不能输入@media screen和(max-width),如下所示:

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

当我按enter时,它就消失了。如何动态添加和删除媒体查询?

EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2015-01-21 22:31:06

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

在Chrome上,您需要直接编辑检查器样式表,以便包括您的媒体查询。您可以转到“源”面板并选择“检查器-样式表”来访问它。

由于这涉及到编写CSS,因此您需要选择该元素。您可以(通常)获得所选元素的唯一CSS选择器,方法是:在“元素”面板中右键单击该元素,然后选择“复制CSS路径”。

然后只需编写您的CSS:

代码语言:javascript
复制
@media screen and (max-width: 300px) {
    /* selector for your element */ { color: red; }
}
票数 51
EN

Stack Overflow用户

发布于 2015-12-16 09:00:50

您总是可以在head部分的style标签中添加CSS。只需右击HTML并选择"Edit as HTML“即可编辑html。例如,

代码语言:javascript
复制
<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>
票数 8
EN

Stack Overflow用户

发布于 2016-04-21 02:22:11

我也遇到了同样的问题,并最终发现当我进入时,例如:

代码语言:javascript
复制
@media (max-width: 767px)
.col-sm-3 {
  width: 75%;
}

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

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/28069389

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档