css – 媒体查询在横向上无法正常工作

2023年1月8日 214次阅读

我有以下媒体查询：

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

在我的Nexus 5上以纵向模式查看网站时,它看起来就像我想要的那样.但是,当我将手机转到横向模式时,它会显示完整的网站,而不是此媒体查询中指定的内容.

为什么会这样？我也尝试过：

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

这并没有解决问题.

最佳答案 实际上Nexus 5横向宽度是590px,你给出了最大宽度：480px ….

See the view-port sizes

你也可以给这样的媒体查询： –

@media screen and (min-width : 320px) and (max-width : 480px) and (orientation : portrait) {
.class-name {}
}

@media screen and (min-width : 320px) and (max-width : 480px) and (orientation :landscape) {
.class-name {}
}

它应该适合你…试试这个

点赞