css – Chrome设备模式仿真媒体查询不工作

前端之家收集整理的这篇文章主要介绍了css – Chrome设备模式仿真媒体查询不工作前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
由于某些原因,设备仿真模式不会读取我的媒体查询。它适用于其他网站,包括我自己的网站,我使用自举,但它不是从零开始使用的媒体查询工作(点击媒体查询按钮使按钮蓝色,但没有显示媒体查询)。下面测试文件。这是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">
原文链接:https://www.f2er.com/css/219240.html

猜你在找的CSS相关文章