由于某种原因,设备模拟模式不会读取我的媒体查询。它适用于其他网站,包括我自己使用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>
答案 0 :(得分:163)
我通过在页面中添加元标记来修复此问题:
<meta name="viewport" content="width=device-width">
答案 1 :(得分:7)
被接受的答案对我没有帮助,我还必须添加一个minimum-scale=1
。
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
答案 2 :(得分:6)
Chrome中的设备模拟仍然是WIP。老实说,我认为他们很快就将它推向了Chrome。尝试使用Canary(chrome beta浏览器)来测试模拟,我发现它的工作方式比Chrome中的更好。
答案 3 :(得分:0)
为我工作。
只需在页面的顶部放置一个视口元标记。参见示例:
<head>
<!--include the following meta tag to make chrome dev tools recognize media queries: -->
<meta name="viewport" content="width=device-width">
</head>
答案 4 :(得分:0)
在您的代码中包含此元标记:
<head>
<!--include the following meta tag to make chrome dev tools recognize media queries: -->
<meta name="viewport" content="width=device-width">
</head>
答案 5 :(得分:0)
一直遇到同样的问题,直到我注意到 如果我针对同一组规则有多个实现,具体取决于屏幕尺寸:
为同一媒体查询指定最小宽度和最大宽度,以免后续的记录被覆盖:
@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 ;
}
或为所有对象设置至少一个断点:
@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 ;
}
}
答案 6 :(得分:0)
我想添加 - 连同接受的答案 - 当 @media
查询写在 下面 其余 CSS 代码时,媒体查询(对我而言)仅适用于 chrome 的检查.