How do I hide or show content with CSS depending on screen size?

问题

Just like Bootstrap, Ionic (Ionic 3) lets us resize the width of a column based on screen size using col-sm-8, col-md-6, col-lg-4. Bootstrap also comes with classes like visible-xs, hidden-sm, etc. that enables us to show or hide content according to the screen size. Does Ionic 3 ship with anything that lets us do the same?

回答1:

I copied the following CSS classes from Bootstrap 4 Alpha into my project and they work perfectly.

.invisible {
  visibility: hidden !important;
}

.hidden-xs-up {
  display: none !important;
}

@media (max-width: 575px) {
  .hidden-xs-down {
    display: none !important;
  }
}

@media (min-width: 576px) {
  .hidden-sm-up {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .hidden-sm-down {
    display: none !important;
  }
}

@media (min-width: 768px) {
  .hidden-md-up {
    display: none !important;
  }
}

@media (max-width: 991px) {
  .hidden-md-down {
    display: none !important;
  }
}

@media (min-width: 992px) {
  .hidden-lg-up {
    display: none !important;
  }
}

@media (max-width: 1199px) {
  .hidden-lg-down {
    display: none !important;
  }
}

@media (min-width: 1200px) {
  .hidden-xl-up {
    display: none !important;
  }
}

.hidden-xl-down {
  display: none !important;
}

Docs: https://v4-alpha.getbootstrap.com/layout/responsive-utilities/

回答2:

Example:

<div hidden-xs visible-block-md>Hidden on small screen</div>

A SCSS solution would be:

$screen-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px
) !default;

@each $keySize, $valueSize in $screen-breakpoints {
    [hidden-#{$keySize}] {
        @media (min-width: $valueSize) {
            display: none;
        }
    }
}

@each $keySize, $valueSize in $screen-breakpoints {
    [visible-block-#{$keySize}] {
        @media (min-width: $valueSize) {
            display: block;
        }
    }
}

@each $keySize, $valueSize in $screen-breakpoints {
    [visible-inline-block-#{$keySize}] {
        @media (min-width: $valueSize) {
            display: inline-block;
        }
    }
}

If you're using Ionic you could go with something like:

@each $breakpoint in map-keys($screen-breakpoints) {
    $infix: breakpoint-infix($breakpoint, $screen-breakpoints);

    @include media-breakpoint-up($breakpoint, $screen-breakpoints) {
        // Provide `[hidden-{bp}]` attributes for floating the element based
        // on the breakpoint
        [hidden#{$infix}] {
            display: none !important;
        }
    }
}

来源：https://stackoverflow.com/questions/44514556/how-do-i-hide-or-show-content-with-css-depending-on-screen-size