网页没有响应

Question

我尝试为手机优化页面，但它没有做任何事情。

我遵循了一个教程，但我无法让它工作。我正在使用谷歌浏览器。

@media screen and (max-width:300px) and (orientation:portrait) {

    header, body, footer: {
        width: 300px;
    }

    .menu {
        font-size: 20px;
    }

    footer {
        font-size: 8px;
    }
}

我真的不明白可能会遗漏什么。 （感谢编辑）

Answer 1

你的CSS中footer之后有一个冒号，这使得浏览器在那时停止，并忽略CSS规则，因为在那里放置冒号是无效的。

请注意max-width的媒体规则，因为您的意思可能是min-width。