Question

我试图在网站版桌面上隐藏一段div元素并将其显示在手机上。但是使用媒体查询不允许我。你知道什么可能导致这个问题吗？以下是我的代码：

   @media all and(min-device-width: 768px){

.Products{display:block;}
.Products-Mobile{display:none;}
.Benefits{ display:block;}
}

@media all and(min-device-width: 321px) and (max-device-width: 767px){

.Products{display:block;}
.Products-Mobile{display:none;}
.Benefits{ display:block;}
}
@media all and(max-device-width: 320px){

.Products{display:none;}
.Products-Mobile{display:block;}
.Benefits{ display:block;}
}

我的HTML：

    <!-- This class will be displayed on the desktop version of the site and will be hidden on the mobile -->
<div class="Products">
 Desktop test   
</div>


<!-- This class will be displayed on the desktop version of the site and will be hidden on the mobile -->
<div class="Products-Mobile">this is mobile test</div>


<!-- This class will be displayed on the mobile and the desktop version of the site -->
<div cass="Benefits">
content
</div>

Answer 1

这很简单......只需在and和(min...)之间添加空格;）

Answer 2

将媒体查询编辑为以下内容：

@media all and (min-width: 768px){

.Products{display:block;}
.Products-Mobile{display:none;}
.Benefits{ display:block;}
}

@media all and (min-width: 321px) and (max-width: 767px){

.Products{display:block;}
.Products-Mobile{display:none;}
.Benefits{ display:block;}
}
@media all and (max-width: 320px){

.Products{display:none;}
.Products-Mobile{display:block;}
.Benefits{ display:block;}
}

Working jsfiddle。从您的媒体查询中删除了-device-。

修改

回答有关在媒体查询中使用-device-的问题 - this has been deprecated in Media Queries Level 4。来自W3C：

要查询视口（或页面媒体上的页面框）的大小，应使用宽度，高度和宽高比媒体功能，而不是设备宽度，设备高度和设备纵横比，其中无论多少，都可以参考设备的物理尺寸可用于放置文件的空间。设备 - *媒体功能有时也用作检测移动设备的代理。相反，作者应该使用更能代表的媒体功能他们试图反对的设备方面。

响应式设计和隐藏div元素

2 个答案: