媒体查询不起作用？

Posted 2023-03-12

【中文标题】媒体查询不起作用？

【英文标题】：Media queries doesnt function?

【发布时间】：2016-06-06 08:48:34

【问题描述】：

我完全是响应式设计的新手。我的媒体查询不起作用。当我调整窗口大小时，我猜它不会重新调整断点。我制作了两个 div，其中一个用于桌面视图，另一个用于平板电脑视图。我使用 display: none 属性来拥有桌面和移动版本。

另一个问题是，有没有办法为所有移动设备配置媒体查询？或者我应该为每个方便的群体写 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;
     

【问题讨论】：

CSS3 media queries not working的可能重复

我的 index.html 中有 ，它是如何重复的？

其他建议呢？您在这里没有提供太多背景信息，如果没有所有事实，很难知道它可能是什么......

【参考方案1】：

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

【参考方案2】：

尝试使用 max-width 和 min-width 仅不使用“设备”。