Media Queries are CSS3 modules that allow your rendered content to adapt to different screen resolutions. Media Queries are one third of process for executing Responsive Web Design. These features can be very useful for the width and height of content. It can be tailored to a specific range of output devices without having to actually change the content itself.
NOTE
If you need the pixel values of these, just divide the REM value by the base unit (16).
@media screen and (min-width: 75rem) { ... }NOTE
The Schema grid system is based on the 960 grid system. Some default media queries are written for large screens, tablets, and mobile devices.
| Size | Breakpoint | Viewport |
|---|---|---|
@bp-desktop |
Screen and (min-width: 75rem) | Desktop Screens |
@bp-tablet |
Screen and (min-width: 48rem) and (max-width: 61.1875rem) | Tablet Screens |
@bp-mobile |
Screen and (max-width: 47.9375rem) | Mobile Screens |
Sometimes you need to hide/show content for different viewports. We got that. Applying these classes hides the content at the respective breakpoint.
| Class | Description |
|---|---|
desktop-hidden |
Apply this class when you want to hide items on desktop screens only |
tablet-hidden |
Apply this class when you want to hide items on tablet screens only |
mobile-hidden |
Apply this class when you want to hide items on mobile screens only |
<div class="mobile-hidden">
{ ... }
</div>Like hidding, but only show content during certain breakpoints.
| Class | Description |
|---|---|
show-desktop |
Apply this class when you want to show items on desktop screens only |
show-tablet |
Apply this class when you want to show items on tablet screens only |
show-mobile |
Apply this class when you want to show items on mobile screens only |
<div class="show-tablet">
{ ... }
</div>