semantic-ui:如何仅在移动端隐藏元素？

Question

我需要隐藏一些元素，例如图片，只在手机上。我如何使用semantic-ui实现这一点？

在angular材质中有类似“hide-X”的东西吗?在bootstrap中有类似“hide-X”的东西吗？

我通读了文档，但找不到类似的东西。我找到的所有内容都是some options for a grid，但我不想使用网格，只是为了让某个元素在某些设备上不可见……

<div class="ui grid">
  <div class="two column mobile only row">
    <div class="column">
      <div class="ui segment">
        Mobile only
      </div>
    </div>
  </div>
</div>

我还发现了some solution here on SO，在那里有人建议写一些额外的CSS。如下所示：

/* 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;
  }
}

这真的是要走的路吗？谢谢你的点子。

Answer 1

是的，您需要使用grid或覆盖样式。这是进入语义UI的唯一方法。这在mobile only类定义中很明显。

@media only screen and (max-width: 991px) and (min-width: 768px) {
  .ui[class*="mobile only"].grid.grid.grid:not(.tablet),
  .ui.grid.grid.grid > [class*="mobile only"].row:not(.tablet),
  .ui.grid.grid.grid > [class*="mobile only"].column:not(.tablet),
  .ui.grid.grid.grid > .row > [class*="mobile only"].column:not(.tablet) {
    display: none !important;
  }
}

@media only screen and (max-width: 1199px) and (min-width: 992px) {
  .ui[class*="mobile only"].grid.grid.grid:not(.computer),
  .ui.grid.grid.grid > [class*="mobile only"].row:not(.computer),
  .ui.grid.grid.grid > [class*="mobile only"].column:not(.computer),
  .ui.grid.grid.grid > .row > [class*="mobile only"].column:not(.computer) {
    display: none !important;
  }
}

@media only screen and (max-width: 1919px) and (min-width: 1200px) {
  .ui[class*="mobile only"].grid.grid.grid:not(.computer),
  .ui.grid.grid.grid > [class*="mobile only"].row:not(.computer),
  .ui.grid.grid.grid > [class*="mobile only"].column:not(.computer),
  .ui.grid.grid.grid > .row > [class*="mobile only"].column:not(.computer) {
    display: none !important;
  }
}

@media only screen and (min-width: 1920px) {
  .ui[class*="mobile only"].grid.grid.grid:not(.computer),
  .ui.grid.grid.grid > [class*="mobile only"].row:not(.computer),
  .ui.grid.grid.grid > [class*="mobile only"].column:not(.computer),
  .ui.grid.grid.grid > .row > [class*="mobile only"].column:not(.computer) {
    display: none !important;
  }
}

希望这能有所帮助。