Question

我希望我的页面看起来很好用iphone4和iphone 5.我写了一些媒体查询，但似乎忽略了它们：

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

#gpsMain{
    position:absolute;
    top:25px;
    left:20%;
}

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

#gpsMain{
    position:absolute;
    top:11px;
    left:20%;
}

}

为什么不应用样式？这是获得两个iPhone的分辨率的正确方法吗？

（查询是我在css文档上写的最后一件事）

Answer 1

仔细检查您是否设置了视口。不确定它是否重要，但我总是看到格式如下的媒体查询：

@-ms-viewport {
    width: device-width;
}

@viewport {
    width: device-width;
}

@media screen and (max-width: 400px) {
    .list-view .site-content .post-thumbnail { background: none; width: auto; z-index: 2; }
}

这是来自2014 wordpress主题。 http://www.responsinator.com/是一个可以仔细检查事物外观的好地方。

Answer 2

尝试更改为：

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

#gpsMain{
    position:absolute;
    top:25px;
    left:20%;
}

}

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

#gpsMain{
    position:absolute;
    top:11px;
    left:20%;
}

}

css媒体查询被忽略了

2 个答案: