响应式设计和隐藏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...);)