jquery - 基于移动浏览器和桌面浏览器隐藏和显示一个div

Question

我将我的内容分成两个 div，左边一个是数量、价格、元素名称，右边一个是产品名称。

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

Answer 1

如果您使用的是 Bootstrap，您可以在此处检查它的响应类以在移动设备/桌面设备上显示/隐藏不同的元素:

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>