由于某些原因,设备模拟模式没有读取我的媒体查询.它适用于其他网站,包括我自己用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>

推荐答案

我通过向页面添加元标记修复了此问题:

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

更新(2019年12月):

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

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

Css相关问答推荐

在ReactJS中使用动画在栅格上添加柱

如何以Angular 将下拉面板的宽度与其文本框对齐

可折叠/可展开的数据表行:如何使Shadcn数据表中的可折叠内容全宽?

VueJS3+Vutify中缺少一些CSS类

SVG文本在移动浏览器上增长并溢出

防止在添加更多项目时扩展CSS网格行

如何在点击时停止动画并将其返回到第一帧?

如何引用 SCSS 中的现有类?

CSS Select 器仅 Select 具有特定类名称的每行的第一个单元格

在 Next.js 中使用 .modules.scss 时未应用样式

为什么删除 AnimatePresence framer.div 时会出现轻微卡顿?

Tailwind CSS 隐藏和可见

CSS 字符串变量的正确null值是多少?

图像 3D 悬停效果

如何为柔和的配色方案提供易于使用的高对比度替代方案?

CSS中的旋转地球

以原始大小的 50% 显示图像

div内的CSS中心内容

在 CSS3 中重新启动动画:比删除元素更好的方法吗?

可变高度的 CSS 浮动 div