响应式设计和隐藏 div 元素

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：

要查询视口（或页面媒体上的页面框）的大小， 应使用宽度、高度和纵横比媒体功能， 而不是设备宽度、设备高度和设备纵横比，这 参考设备的物理尺寸，不管多少 空间可用于正在布置的文档。 device-* 媒体 功能有时也用作检测移动设备的代理。 相反，作者应该使用能够更好地代表 他们尝试设计样式的设备方面。