Media Queries Sass API

Variables

phone-max-width

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

Used By

• @mixin phone-media

tablet-min-width

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

Used By

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

tablet-max-width

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

Used By

• @mixin tablet-only-media

desktop-min-width

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

Used By

• @mixin desktop-media

large-desktop-min-width

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

Used By

• @mixin large-desktop-media

Mixins

phone-media

@mixin phone-media { … }

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 { … }

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 { … }

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 { … }

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 { … }

Examples

@use "@react-md/core";

.example {
  width: 100%;

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

Requires

• $large-desktop-min-width

media

@mixin media($type) { … }

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) { … }

Requires

• @mixin media
• $_media-types

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

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

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

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

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

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 & {}

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 & {}

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 & {}

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 & {}

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 & {}

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 & {}

This should be one of phone, tablet, tablet-only, desktop, or large-desktop

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 & {}

This should be one of phone, tablet, tablet-only, desktop, or large-desktop or a generic media query