在 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 媒体查询的主要内容,如果未能解决你的问题,请参考以下文章