由于某些原因,设备仿真模式不会读取我的媒体查询。它适用于其他网站,包括我自己的网站,我使用自举,但它不是从零开始使用的媒体查询工作(点击媒体查询按钮使按钮蓝色,但没有显示媒体查询)。下面测试文件。这是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>