Css Chrome设备模式模拟媒体查询不工作_Css_Google Chrome_Media Queries_Developer Tools

Css Chrome设备模式模拟媒体查询不工作

css google-chrome

Css Chrome设备模式模拟媒体查询不工作,css,google-chrome,media-queries,developer-tools,Css,Google Chrome,Media Queries,Developer Tools,由于某些原因，设备仿真模式没有读取我的媒体查询。它适用于其他网站，包括我自己用bootstrap创建的网站，但不适用于我从头开始使用的媒体查询（单击“媒体查询”按钮将按钮变为蓝色，但不显示媒体查询）。下面是测试文件。这是Chrome中的一个bug还是我的文件中有需要更改的内容 <!DOCTYPE html>  <html> <head>

由于某些原因，设备仿真模式没有读取我的媒体查询。它适用于其他网站，包括我自己用bootstrap创建的网站，但不适用于我从头开始使用的媒体查询（单击“媒体查询”按钮将按钮变为蓝色，但不显示媒体查询）。下面是测试文件。这是Chrome中的一个bug还是我的文件中有需要更改的内容

<!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>


MQ示例1
正文{字体系列：无衬线；}
h1{颜色：红色；}
h2{颜色：蓝色；}
p{颜色：绿色；}
@介质（最大宽度：768px）和（最小宽度：481px）{
h1{颜色：绿色；}
h2{颜色：红色；}
p{颜色：蓝色；}
}
@介质（最大宽度：479px），打印{
h1，h2，p{颜色：黑色；}
}
@媒体印刷品{
正文{font-family:serif；}
}
我是一级头球
我是一个段落
我是二级头球
我是另一段

Chrome中的设备仿真仍然是一个WIP。老实说，我觉得他们把它推到Chrome上有点太早了。尝试使用Canary（chrome beta浏览器）测试模拟，我发现它的工作方式比chrome中的要好。

我通过在我的页面中添加一个元标记修复了这个问题：

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

更新（2019年12月）：

看起来您可能还需要设置初始比例和最小比例，如下所示：

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


被接受的答案不适合我，我还必须添加最小量表=1

<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>

在代码中包含此元标记：

一直有同样的问题，直到我注意到
如果根据屏幕大小，同一组规则有多个实现：
指定同一媒体查询的最小宽度和最大宽度，使其不会被后续媒体查询覆盖：
@媒体屏幕和（最小宽度：9px，最大宽度：9px）{
css.selector{
应用样式规则：在这个屏幕大小范围内；
} 
}
css.selector{
应用另一种样式：从10px开始；
}

或将至少一个断点设置为“全部”：
@媒体屏幕和（最小宽度：9px）{
应用某些样式：从这一点开始；
}
}
@媒体屏幕和屏幕（最小宽度：99px）{
应用某些样式：从这一点开始；
}
}
这也适用于我。你知道这为什么能解决这个问题吗？@BananaNeil:就连我都很想知道这个解决方案背后的原因是什么？有什么想法吗？看起来chrome emulator总是试图将946px
页面渲染并缩小到它所模拟的任何大小的屏幕上。通过检查emulator中有问题页面的body标记的宽度始终为946px
，可以看出这是正确的。视口标记告诉浏览器应该如何尝试呈现页面width=devicewidth
按照您预期的方式运行，而width=100px
则可以放大所有内容。你可以在这里读到更多关于它的信息：如果你放大过度，它的行为也会变得古怪。。。您只能获得可以输入的尺寸。在Mac电脑上，如果执行cmd shift-，最终会再次弹出移动模拟器列表，其中包含Galaxy S5、iPhone 6等…很难记住这不是默认设置；）山姆·斯科特：@BananaNeil的答案比我的更令人满意，如果可以的话，请将他的答案标记为最佳答案。你是对的，我没有意识到这个附加属性最小刻度=1。。谢谢