隐藏仅限移动设备的元素 - 语义UI

Question

我有隐藏移动设备图像的问题.我正在使用语义UI框架.在文档中我发现了一些类:

1. 仅限移动设备 - 仅显示低于768像素
2. 仅限平板电脑 - 仅显示768px - 991px之间
3. 仅限计算机 - 将始终显示992px及以上

例如,我使用"仅限计算机"类来隐藏平板电脑和手机上的图像,但结果让我感到困惑.

<div class="ui grid stackable">
  <div class="row middle aligned">
    <div class="nine wide column">
      <h1 class="ui header blue">Default Header.</h1>
    </div>
    <div class="seven wide computer only column">
      <img class="ui image" src="http://icons.veryicon.com/png/System/iNiZe/niZe%20%20%20IMG.png" alt="" title="">
    </div>
  </div>
</div>

http://jsfiddle.net/3xkrx/318/

Answer 1

另外,我找到了另一个解决方案.可能适合有用的人.

我已经"mobile hidden"在列中添加了类,我想在移动设备上隐藏它.

<div class="ui grid stackable">
 <div class="row middle aligned">
  <div class="nine wide column">
   <h1 class="ui header blue">Default Header.</h1>
  </div>
  <div class="seven wide column mobile hidden">
    <img class="ui image" src="http://icons.veryicon.com/png/System/iNiZe/niZe%20%20%20IMG.png" alt="" title="">
  </div>
</div>

Answer 2

添加mobile only grid到img标记

正确的表达方式如下:

<img class="ui image mobile only grid " src="http://icons.veryicon.com/png/System/iNiZe/niZe%20%20%20IMG.png" alt="" title="">

Answer 3

访问这里效果很好

/* Mobile */

@media only screen and (max-width: 767px) {
  [class*="mobile hidden"],
  [class*="tablet only"]:not(.mobile),
  [class*="computer only"]:not(.mobile),
  [class*="large monitor only"]:not(.mobile),
  [class*="widescreen monitor only"]:not(.mobile),
  [class*="or lower hidden"] {
    display: none !important;
  }
}
etc...

https://jsfiddle.net/8LkLoxcx/