Отзывчивый дизайн и скрытие элемента 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- из ваших медиа-запросов.

EDIT

Чтобы ответить на вопросы, касающиеся использования -device- в запросах медиа - this has been deprecated in Media Queries Level 4. От W3C:

Для запроса для размера окна просмотра (или поля страницы на странице СМИ), особенность медиа ширины, высота и коэффициент пропорциональности должна быть использована, , а не устройство ширины, устройство -характеристик и отношение размера устройства, которые относятся к физическому размеру устройства, независимо от того, сколько доступно для выложенного документа. Функции device- * media также иногда используются в качестве прокси-сервера для обнаружения мобильных устройств. Вместо этого авторы должны использовать мультимедийные функции, которые лучше представляют аспект устройства , с которым они пытаются стирать.