html - 为什么我的适合移动设备的媒体屏幕查询在我的手机上不起作用？

Question

我在我的 main.css 文件中为这个特定的查询使用以下代码：

@media only screen and (max-width: 480px) {
nav ul {
    margin: 0;
    padding: 0;
}
nav li {
    display: block;
    padding: 1% 1% 1% 1%;
    border-bottom: 1px solid #fff;
}
nav li:last-child{
    border-bottom: none;
}
main p {
    margin-bottom: 5%;
}
img {
    border: 0.5px 0.5px solid #000;
}
#brands img {
    width: 75%;
}
footer {
    font-size: 20px;
}
}

然而，奇怪的是，当我在手机上查看宽度为 360 像素的网站时，查询并没有像我在笔记本电脑上调整 Chrome 窗口大小时那样显示。

我刚刚问了我的兄弟，他告诉我还有其他东西我应该用于移动版本......那么，我在这里错过了什么？

标签： htmlcssmobilemedia-queriesscreen

Answer 1

你在手机上使用什么浏览器？如果它是一个过时的浏览器，它不会应用媒体查询，因为这个词只在屏幕之前。