语义-UI:怎么仅在移动设备上隐藏元素?

本教程将介绍语义-UI:如何仅在移动设备上隐藏元素?的处理方法,这篇教程是从别的地方看到的,然后加了一些国外程序员的疑问与解答,希望能对你有所帮助,好了,下面开始学习吧。

语义-UI:怎么仅在移动设备上隐藏元素? 教程 第1张

问题描述

我只需要在移动设备上隐藏一些元素,例如图像。怎么使用语义用户界面实现这一点?

角材质中是否有"Hide-X",引导中是否有"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;
  }
}

真的要走这条路吗?谢谢您的点子。

推荐答案

是,您需要使用grid或覆盖样式。这是进入语义用户界面的唯一方法。
这在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;
  }
}

希望这能有所帮助。

好了关于语义-UI:怎么仅在移动设备上隐藏元素?的教程就到这里就结束了,希望趣模板源码网找到的这篇技术文章能帮助到大家,更多技术教程可以在站内搜索。