为什么我的手机友好媒体屏幕查询无法在手机上使用?

时间:2018-09-20 21:17:07

标签: html css mobile media-queries screen

我正在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;
}
}

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

Viewing via resized Chrome window on laptop. Viewing via my mobile Chrome tab on phone. 我只是问我的兄弟,他告诉我还有其他一些我要用于移动版本的东西...那么,我在这里想念的是什么?

1 个答案:

答案 0 :(得分:0)

您在手机上使用什么浏览器?如果它是过时的浏览器,则由于屏幕前仅字样,因此将不会应用媒体查询。