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

Posted 2023-03-06

【中文标题】在 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 以下时，我看到了样式中的媒体查询。