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

将您的媒体查询修改为以下内容：

@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：

To query for the size of the viewport (or the page box on page media), the width, height and aspect-ratio media features should be used, rather than device-width, device-height and device-aspect-ratio, which refer to the physical size of the the device regardless of how much space is available for the document being laid out. The device-* media features are also sometimes used as a proxy to detect mobile devices. Instead, authors should use media features that better represent the aspect of the device that they are attempting to style against.

Answer 2

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

响应式设计和隐藏 div 元素

Responsive design and hiding div element

html

css

media-queries

responsive-design