html - 响应式设计和隐藏 div 元素

Question

我想在网站的桌面版本上隐藏一 block 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

很简单...只需在和和(min...)之间加一个空格即可;)