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