Sam*_*ott 76 css google-chrome developer-tools media-queries
由于某种原因,设备仿真模式不会读取我的媒体查询.它适用于其他网站,包括我自己使用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>
Ban*_*eil 193
我通过在页面中添加元标记来解决此问题:
<meta name="viewport" content="width=device-width">
san*_*anj 11
接受的答案对我而言没有做到，我还必须添加一个minimum-scale=1。
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
小智 6
在您的代码中包含此元标记：
<head>
<!--include the following meta tag to make chrome dev tools recognize media queries: -->
<meta name="viewport" content="width=device-width">
</head>Chrome中的设备模拟仍然是WIP.老实说,我认为他们很快就将它推向了Chrome.尝试使用Canary(chrome beta浏览器)来测试模拟,我发现它的工作方式比Chrome中的更好.
| 归档时间： |
|
| 查看次数： |
31446 次 |
| 最近记录： |