Chrome Device Mode Emulation Media Queries Not Working

由于某种原因,设备模拟模式没有读取我的媒体查询。它可以在其他网站上工作,包括我自己用 bootstrap 创建的网站,但是不能在我从头开始使用的媒体查询上工作(点击媒体查询按钮将按钮变成蓝色,但是没有显示媒体查询)。测试文件如下。这是一个错误,在 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>
64137 次浏览

Chrome 中的设备仿真仍然是一个在制品。说实话,我觉得他们推出 Chrome 有点太早了。尝试使用 Canary (Chrome beta 浏览器)来测试仿真,我发现它比 Chrome 中的要好得多。

我通过在页面中添加一个 meta 标签来解决这个问题:

 <meta name="viewport" content="width=device-width">

UPDATE (December 2019):

看起来你可能还需要设置初始刻度和最小刻度,像这样:

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />

The accepted answer didn't do it for me, I had to add a minimum-scale=1 as well.

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />

我没问题。

只需在页面的头部放置一个 viewport 元标签:

 <head>
<!--include the following meta tag to make chrome dev tools recognize media queries: -->
<meta name="viewport" content="width=device-width">
</head>

在代码中包含这个 meta 标记:

<head>
<!--include the following meta tag to make chrome dev tools recognize media queries: -->
<meta name="viewport" content="width=device-width">
</head>

一直有同样的问题,直到我注意到 if I have more than one implementation for the same set of rules depending on the screen size:

指定同一媒体查询的最小和最大宽度,以免被后续查询覆盖:

@media screen and (min-width:9px , max-width:9px) {


css.selector {


style rules gets applied : in this range of screen sizes ;


}


}




css.selector{




the other style get applied : starting from 10px ;


}

Or set at least one breakpoint to all :

@media screen and (min-width:9px) {


some styles get applied : starting from this point ;


}


}


@media screen and (min-width:99px) {


some styles gets applied : starting from this point ;


}


}

我想添加-随着接受的答案-媒体查询只工作(对我来说)在铬的检查时,@media查询是写 下面的 CSS 代码的其余部分。