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

Posted

技术标签:

【中文标题】在 Chrome 开发者工具中输入 CSS 媒体查询【英文标题】:Enter CSS Media Queries in Chrome Developer Tools 【发布时间】:2015-03-20 02:24:52 【问题描述】:

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

http://www.w3schools.com/cs-s-ref/css3_pr_mediaquery.asp

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

【问题讨论】:

【参考方案1】:

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

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

由于这涉及编写 CSS,您需要选择元素。您可以(通常)通过在“元素”面板中右键单击该元素并选择“复制 CSS 路径”来为您选择的元素获取唯一的 CSS 选择器。

然后写你的 CSS:

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

【讨论】:

我想出了那部分,但有没有办法预览更改?通过 Chrome 开发者工具编辑文件后,文件名旁边有一个星号*。顺便说一句,网页不在本地主机上;它是一个已经在discussions.udacity.com/t/lesson-2-media-query/22206上线的 @zeta:更改会在您编辑时即时应用。 你是对的。我处于“切换设备模式”,您可以在其中选择设备和东西的分辨率,但它在那里不起作用。 请注意,只有在您自己对 CSS 进行了一些自定义更改(即添加您自己的 [+] 新样式规则)后,“inspector-stylesheet”才会在您的 Sources 面板中可用。【参考方案2】:

您可以使用新样式规则。 点击 .cls 旁边的加号 (+)。

然后,您会看到它生成了新类。现在点击inspector-stylesheet

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

【讨论】:

【参考方案3】:

您始终可以在 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>

【讨论】:

【参考方案4】:

我也遇到了同样的问题,终于弄明白了,比如我输入的时候:

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

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

【讨论】:

以上是关于在 Chrome 开发者工具中输入 CSS 媒体查询的主要内容,如果未能解决你的问题,请参考以下文章

如何在 CSS 中模拟媒体查询?

如何在 Firefox 开发者版中模拟 CSS 打印媒体类型?

如何在 Chrome 开发者工具中查看范围输入拇指的样式?

使用 chrome 设备工具栏和媒体查询进行响应式布局调试

在 Chrome 开发者工具中添加一个新的 CSS 类

如何在 chrome 开发者工具中重新加载单个文件