css - 隐藏仅适用于移动设备的元素 - 语义 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

将仅移动网格添加到img标签

正确的表达方式如下:

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