仅用于移动设备的隐藏元素 - 语义 UI答案

【问题标题】：Hide element for mobile only - Semantic UI仅用于移动设备的隐藏元素 - 语义 UI
【发布时间】：2017-11-22 01:18:52
【问题描述】：

我在为移动设备隐藏图片时遇到问题。我正在使用语义 UI 框架。在文档中我发现了一些类：

仅限移动设备 - 仅在 768 像素以下显示
仅限平板电脑 - 仅在 768px - 991px 之间显示
仅限计算机 - 将始终显示 992 像素及以上

例如，我正在使用“仅限计算机”类来隐藏平板电脑和移动设备上的图像，但结果让我感到困惑。

<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/

【问题讨论】：

您能澄清一下这个问题吗？结果如何让你感到困惑？

标签： css semantic-ui

【解决方案1】：

将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="">

【讨论】：

谢谢，它在 jsfiddle 中运行良好，但在我的网站上无法运行。宽屏上的图像消失了，神奇的事情发生了。我用了 class="ui image computer only grid"
这应该是行不通的，因为它会显示在平板电脑上

【解决方案2】：

此外，我还找到了另一种解决方案。可能对某人有帮助。

我已将 "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>

【讨论】：

【解决方案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/

【讨论】：