Media Queries

How to use it

This is an example where an element has position relative for mobile and position absolute from the md breakpoint

_partial.scss

@use "sailorcss" as s;


.element {
  position:relative;

  @include s.media-up(md) {
    position:absolute;
    // your content here
  }
}

Mixin argument

@include media-up($breakpoint)

$breakpoint

A breakpoint key(name) from the $s-breakpoints config map.

All possibilities

We recommend to style with the mobile first approach. But there is other mixins available to target breakpoints down.

@include s.media-up
output.css

         @media (min-width: value)
@include s.media-down
output.css

         @media (max-width: value)
@include s.media-only
output.css

         @media (min-width: value) and (max-width: value)