media

Create a media query

Parameter	Type	Description
$breakpoint-name-or-number	string or number	Either number (including unit) or a breakpoint name
$prefix-or-max-width-or-number	string or number	Either number (including unit) or maximum breakpoint name or media type (min-width (default) or max-width)

Example: min-width with number

Components/ExampleComponent/_style.scss

.m-example-component {
  @include media(200px) {
    font-size: 10px;
  }
}

dist/frontend.css

@media screen and (min-width: 200px) {
  .m-example-component {
    font-size: 10px;
  }
}

Example: max-width with number

Components/ExampleComponent/_style.scss

.m-example-component {
  @include media(200px, max-width) {
    font-size: 10px;
  }
}

dist/frontend.css

@media screen and (max-width: 200px) {
  .m-example-component {
    font-size: 10px;
  }
}

Example: min-width with breakpoint name

assets/styles/config/layout/_breakpoints.scss

$initial-breakpoint-name: 'xs';

$breakpoints: (
  'sm': 576px, // >= bigger than or equal to 576px
  'md': 768px,
  'lg': 992px,
  'xl': 1200px,
  'xxl': 1640px,
);

$fluid-breakpoints: (
  'xs': (360px, 709px),
  'sm': (1024px, 768px),
  'xl': (1920px, 1080px),
);

Components/ExampleComponent/_style.scss

.m-example-component {
  @include media(sm) {
    font-size: 20px;
  }
}

dist/frontend.css

@media screen and (min-width: 576px) {
  .m-example-component {
    font-size: 20px;
  }
}

Example: max-width with breakpoint name

assets/styles/config/layout/_breakpoints.scss

$initial-breakpoint-name: 'xs';

$breakpoints: (
  'sm': 576px, //
  'md': 768px, // < less than 768px
  'lg': 992px,
  'xl': 1200px,
  'xxl': 1640px,
);

$fluid-breakpoints: (
  'xs': (360px, 709px),
  'sm': (1024px, 768px),
  'xl': (1920px, 1080px),
);

Components/ExampleComponent/_style.scss

.m-example-component {
  @include media(sm, max) {
    font-size: 20px;
  }
}

dist/frontend.css

@media screen and (max-width: 767px) {
  .m-example-component {
    font-size: 20px;
  }
}

Example: min-with and max-width with breakpoint names

assets/styles/config/layout/_breakpoints.scss

$initial-breakpoint-name: 'xs';

$breakpoints: (
  'sm': 576px,
  'md': 768px,
  'lg': 992px, // >= bigger than or equal to 992px
  'xl': 1200px, // < less than 1200px
  'xxl': 1640px,
);

$fluid-breakpoints: (
  'xs': (360px, 709px),
  'sm': (1024px, 768px),
  'xl': (1920px, 1080px),
);

Components/ExampleComponent/_style.scss

.m-example-component {
  @include media(lg, xl) {
    font-size: 20px;
  }
}

dist/frontend.css

@media screen and (min-width: 992px) and (max-width: 1199px) {
  .m-example-component {
    font-size: 20px;
  }
}