隐藏并显示基于移动浏览器和桌面浏览器的div

Question

我将内容分为两个div，其中一个是数字，价格，项目名称，右边是产品名称。

现在我希望通过隐藏产品名称div在移动浏览器中显示左侧div，而在桌面浏览器中我希望同时显示这两者。

Answer 1

如果您正在使用Bootstrap，您可以检查它的响应类以显示/隐藏Mobile / Desktop上的不同元素，在这里：

http://getbootstrap.com/css/#responsive-utilities

如果您没有使用bootstrap或任何其他内置此类帮助类的库，那么您需要编写自己的媒体查询，例如：

CSS：

@media screen and (min-width: 767px) and (max-width: 1024px) {
  .price, .left-div { display: none; }   
}

HTML：

<div class="container">
  <div class="left-div"> TEXT TEXT</div>   
  <div class="price"> $49</div>
</div>

Answer 2

您可以使用媒体查询

来完成此操作

@media (max-width:767px){
    .whatever{display:none;}
}