gpt4 book ai didi

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

转载 作者:数据小太阳 更新时间:2023-10-29 09:07:54 25 4
gpt4 key购买 nike

出于某种原因,设备仿真模式未读取我的媒体查询。它适用于其他网站,包括我自己使用 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>

最佳答案

我通过向我的页面添加元标记解决了这个问题:

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

更新(2019 年 12 月):

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

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

关于css - Chrome 设备模式模拟媒体查询不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26888751/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com