Media Queries Sass API

Variables

phone-max-width

$phone-max-width: 47.9375em !default;

The default phone max width media query. This should match the phoneMaxWidth value on the AppSizeProvider.

Used By

• @mixin phone-media

tablet-min-width

$tablet-min-width: 48em !default;

The default tablet min width media query. This should match the tabletMinWidth value on the AppSizeProvider.

Used By

• @mixin tablet-media
• @mixin tablet-only-media

tablet-max-width

$tablet-max-width: 64em !default;

The default tablet max width media query. This should match the tabletMaxWidth value on the AppSizeProvider.

Used By

• @mixin tablet-only-media

desktop-min-width

$desktop-min-width: 64.0625em !default;

The default desktop min width media query. This should match the desktopMinWidth value on the AppSizeProvider.

Used By

• @mixin desktop-media

large-desktop-min-width

$large-desktop-min-width: 80em !default;

The default large desktop min width media query. This should match the largeDesktopMinWidth value on the AppSizeProvider.

Used By

• @mixin large-desktop-media

Mixins

phone-media

@mixin phone-media { … }

Applies styles for phones only.

Note: This will need to be included at the end of a block with the new Sass rules or prefix styles with & {}

Examples

Example Usage SCSS

@use "@react-md/core";

.example {
  background-color: red;

  @include core.phone-media {
    color: blue;
  }
}

Requires

• $phone-max-width

tablet-media

@mixin tablet-media { … }

Applies styles when the viewport is at least as wide as a tablet's min width.

Note: This will need to be included at the end of a block with the new Sass rules or prefix styles with & {}

Examples

@use "@react-md/core";

.example {
  display: flex;
  flex-direction: column;

  @include core.tablet-media {
    flex-direction: row;
  }
}

Requires

• $tablet-min-width

tablet-only-media

@mixin tablet-only-media { … }

Applies styles for tablets only.

Note: This will need to be included at the end of a block with the new Sass rules or prefix styles with & {}

Examples

@use "@react-md/core";

.example {
  background-color: red;

  @include core.tablet-only-media {
    color: blue;
  }
}

Requires

• $tablet-min-width
• $tablet-max-width

desktop-media

@mixin desktop-media { … }

Applies styles when the viewport is at least as wide as a desktop's min width.

Note: This will need to be included at the end of a block with the new Sass rules or prefix styles with & {}

Examples

@use "@react-md/core";

.example {
  width: 100%;

  @include core.desktop-media {
    width: 33%;
  }
}

Requires

• $desktop-min-width

large-desktop-media

@mixin large-desktop-media { … }

Applies styles when the viewport is at least as wide as a large desktop's min width.

Note: This will need to be included at the end of a block with the new Sass rules or prefix styles with & {}

Examples

@use "@react-md/core";

.example {
  width: 100%;

  @include core.large-desktop-media {
    width: 33%;
  }
}

Requires

• $large-desktop-min-width

media

@mixin media($type) { … }

Applies one of the media queries.

Note: This will need to be included at the end of a block with the new Sass rules or prefix styles with & {}

Used By

• @mixin media-or-media-query

Requires

• @function validate
• $_media-types

media-or-media-query

@mixin media-or-media-query($type-or-media-query) { … }

Applies one of the media queries.

Note: This will need to be included at the end of a block with the new Sass rules or prefix styles with & {}

Requires

• @mixin media
• $_media-types