媒体查询不起作用？

Question

我完全是响应式设计的新手。我的媒体查询不起作用。当我调整 window 的大小时，它没有重新调整我猜想的断点。我制作了两个 div，其中一个用于桌面视图，另一个用于平板电脑视图。我用显示：none 属性有桌面版和移动版。

另一个问题是，有没有办法为所有移动设备配置媒体查询？或者我应该为每个方便的 inviduel 组写 css 吗？（例如 iphone5、iphone6、nexus 等。）

.tablet-view{
    display: none;
}

.desktop-view{
    display: inline;
}
/* ----------- iPad mini ----------- */

/* Portrait and Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 1) {
    .desktop-view{
        display:none;
    }.tablet-view {

         display: inline;
     }
}

/* Portrait */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1) {
    .desktop-view{
        display:none;
    }.tablet-view {

         display: inline;
     }
}

/* Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1) {
    .desktop-view{
        display:none;
    }.tablet-view {

         display: inline;
     }
}

/* ----------- iPad 1 and 2 ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 1) {
    .desktop-view{
        display:none;
    }.tablet-view {

         display: inline;
     }
}

/* Portrait */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1) {
    .desktop-view{
        display:none;
    }.tablet-view {

         display: inline;
     }
}

/* Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1) {
    .desktop-view{
        display:none;
    }.tablet-view {

         display: inline;
     }
}

/* ----------- iPad 3 and 4 ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 2) {
    .desktop-view{
        display:none;
    }.tablet-view {

         display: inline;
     }
}

/* Portrait */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 2) {
    .desktop-view{
        display:none;
    }.tablet-view {

         display: inline;
     }
}

/* Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 2) {
    .desktop-view{
display:none;
    }.tablet-view {

         display: inline;
     }

}

Answer 1

您正在使用 device-width。当您调整浏览器的 window 大小时，您不会更改设备的宽度，因此媒体查询不适用。在不同的设备上尝试或使用 DevTools 中的 Chrome 设备模式 。

Answer 2

尝试仅使用 max-width 和 min-width，而不使用 'device'。

媒体查询不起作用？

Media queries doesnt function?

css

media-queries