响应式css，两个不同的布局，当设备高度相同且宽度不同

Question

我有一个网页，它有不同的iMac和iPod布局，但不幸的是，iPod和iMac具有相同的1024px高分辨率。现在，当我的CSS呈现它在iMac中选择iPod CSS时，我该如何解决这个问题？

我正在通过CSS媒体查询制作折叠的自举菜单，但它也会在iMac中折叠我的菜单，我只想在iPod中使用它。

  

iMac CSS

@media screen and (min-device-width: 2560px) and (min-device-height: 1440px) {
.navbar-collapse.collapse {
    display: block !important;
}

    .navbar-collapse.collapse.in {
        display: none !important;
    }

.navbar-header .collapse, .navbar-toggle {
    display: none !important;
}

.navbar-header {
    float: left !important;
} }

  

iPod CSS

@media screen and (min-device-width: 768px) and (min-device-height: 1024px) {
/* -- Responsive navbar */
.navbar-collapse.collapse {
    display: none;
}

    .navbar-collapse.collapse.in {
        display: block;
    }

.navbar-header .collapse, .navbar-toggle {
    display: block;
}

.navbar-header {
    float: none;
} }

Answer 1

这些天我很少在媒体查询中看到(min-device-height)。你应该没问题就是声明宽度。实际上，这几天几乎所有媒体查询都是(min-width: __px)或(max-width: __px)。

基本上，你过度复杂了。尝试将媒体查询切换为：

@media screen and (min-width: 2560px) {}

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

我还建议将min-width值调整为更小的值。桌面媒体查询只会在有人在27＆＃34; iMac的浏览器全屏显示。您可能希望桌面版网站从1280px或其他位置开始。