Question

我刚刚开始练习媒体查询，我不确定为什么下面的代码无效。媒体查询对我来说很新，所以如果我的问题看起来很愚蠢，请原谅。我正在为智能手机编写代码。感谢

这是html

<head>
    <link href="portfolio.css" rel="stylesheet" media="screen">
</head>

<body>

    <div class="intro">
        <ul class="menu">
            <li><a href="#">SKILLS</a></li>
            <li><a href="#">MY WORK</a></li>
            <li><a href="#">ABOUT ME</a></li>
            <li><a href="#">CONTACT</a></li>
        </ul>
    </div>
</body>

和CSS

@media and (max-device-width:500px) {
    .intro {
        background-color: #f2f2f2;
        height: 400px;
    }

    .intro .menu li {
        display: inline-block;

    }

    .intro .menu li a {
        font-family: "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif;
        color: #fff;
    }
}

Answer 1

从您需要使用的代码中删除“和”，如下所示： -

@media only screen and (max-width: 500px){

}

您的媒体查询仅用于特定浏览器，例如safari和opera。

@media only screen and (max-device-width:500px){

}

我的媒体查询无效，我不知道为什么。这是我第一次使用媒体查询

1 个答案: