Question

由于某种原因，设备模拟模式不会读取我的媒体查询。它适用于其他网站，包括我自己使用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>

Answer 1

我通过在页面中添加元标记来修复此问题：

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

Answer 2

被接受的答案对我没有帮助，我还必须添加一个minimum-scale=1。

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

Answer 3

Chrome中的设备模拟仍然是WIP。老实说，我认为他们很快就将它推向了Chrome。尝试使用Canary（chrome beta浏览器）来测试模拟，我发现它的工作方式比Chrome中的更好。

Answer 4

为我工作。

只需在页面的顶部放置一个视口元标记。参见示例：

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

Answer 5

在您的代码中包含此元标记：

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

Answer 6

一直遇到同样的问题，直到我注意到如果我针对同一组规则有多个实现，具体取决于屏幕尺寸：

为同一媒体查询指定最小宽度和最大宽度，以免后续的记录被覆盖：

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

}

}

Answer 7

我想添加 - 连同接受的答案 - 当 @media 查询写在下面其余 CSS 代码时，媒体查询（对我而言）仅适用于 chrome 的检查.

Chrome设备模式仿真媒体查询无效

7 个答案: