CSS Chrome 设备模式模拟媒体查询不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26888751/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Chrome Device Mode Emulation Media Queries Not Working
提问by Sam Scott
For some reason device emulation mode is not reading my media queries. It works on other sites including my own sites that I made with bootstrap, but it's not working on media queries I am using from scratch (clicking the media queries button turns the button blue but no media queries are displayed). Test file below. Is this a bug in Chrome or is there something I need to change in my file?
由于某种原因，设备仿真模式没有读取我的媒体查询。它适用于其他网站，包括我用引导程序制作的我自己的网站，但它不适用于我从头开始使用的媒体查询（单击媒体查询按钮将按钮变为蓝色，但不显示媒体查询）。测试文件如下。这是 Chrome 中的错误还是我需要在我的文件中更改某些内容？
<!DOCTYPE html>
<!--
Media Queries Example 1
Sam Scott, Fall 2014
-->
<html>
<head>
<title>MQ Example 1</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body { font-family: sans-serif; }
h1 { color: red; }
h2 { color:blue; }
p { color:green; }
@media (max-width: 768px) and (min-width: 481px) {
h1 { color: green; }
h2 { color:red; }
p { color:blue; }
}
@media (max-width:479px), print {
h1,h2,p { color:black; }
}
@media print {
body { font-family: serif; }
}
</style>
</head>
<body>
<h1>I'm a first level heading</h1>
<p>I'm a paragraph.</p>
<h2>I'm a second level heading</h2>
<p>I'm another paragraph.</p>
</body>
</html>
回答by BananaNeil
I fixed this problem by adding a meta tag to my page:
我通过向页面添加元标记解决了这个问题：
<meta name="viewport" content="width=device-width">
UPDATE (December 2019):
更新（2019 年 12 月）：
It looks like you may also need to set the initial scale and minimum scale, like so:
看起来您可能还需要设置初始比例和最小比例，如下所示：
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
回答by sanjsanj
The accepted answer didn't do it for me, I had to add a minimum-scale=1as well.
接受的答案对我不起作用，我也必须添加一个minimum-scale=1。
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
回答by Digger
Device emulation in Chrome is still a WIP. To be honest I think they pushed it to Chrome a little too soon. Try using Canary (the chrome beta browser) to test the emulation, I find that it's working way better than the one in Chrome.
Chrome 中的设备模拟仍然是一个 WIP。老实说，我认为他们将其推送到 Chrome 有点过早。尝试使用 Canary（chrome beta 浏览器）来测试仿真，我发现它比 Chrome 中的要好得多。
回答by williamvivas
Include this meta tag in your code:
在您的代码中包含此元标记：
<head>
<!--include the following meta tag to make chrome dev tools recognize media queries: -->
<meta name="viewport" content="width=device-width">
</head>回答by Nati Kamusher
Works for me.
为我工作。
Just put a viewport meta tag in the head section of your page. See example:
只需在页面的头部部分放置一个视口元标记。见示例：
<head>
<!--include the following meta tag to make chrome dev tools recognize media queries: -->
<meta name="viewport" content="width=device-width">
</head>
![CSS 如何告诉 Gulp 跳过或忽略 gulp.src([...]) 中的某些文件？](/res/img/loading.gif)