semantic-ui: how to hide element on mobile only?

问题

I need to hide some element, e.g. an image, only on mobile. How can I achive this with semantic-ui?

Is there anything like "hide-xs" in angular material or "hidden-xs" in bootstrap?

I read through the documentation and couldn´t find anything similar. All I found were some options for a grid, but I don´t want to use a grid, just to make an element invisible on certain devices...

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

Also I found some solution here on SO, where someone suggested to write some additional CSS. Like this:

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

Is that really the way to go? Thanks for your ideas.

回答1:

Yes, you need to either use grid or override the styles. That's the only way to go in Semantic UI. It is evident in the mobile only class definition.

@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;
  }
}

Hope this helps.

来源：https://stackoverflow.com/questions/48683705/semantic-ui-how-to-hide-element-on-mobile-only

标签

css

semantic-ui