Breakpoint

Min-Width

Name	Value
min-width-breakpoint-mobile	`320px` Defined in `src/codex-base.json` Refers to `size.viewport.32` A mobile device's minimum available screen width. Many older feature phones have screens smaller than this value.
min-width-breakpoint-tablet	`640px` Defined in `src/codex-base.json` Refers to `size.viewport.64` A tablet device's minimum available screen width. Note: the size chosen is eager to be re-evaluated with Web team and Product Analytics.
min-width-breakpoint-desktop	`1120px` Defined in `src/codex-base.json` Refers to `size.viewport.112` A desktop device's minimum available screen width.
min-width-breakpoint-desktop-wide	`1680px` Defined in `src/codex-base.json` Refers to `size.viewport.168` A wider desktop's minimum available screen width.

Name Value

Name	Value
max-width-breakpoint-mobile	`calc( 640px - 1px )` Defined in `src/codex-base.json` Refers to `size.viewport.64` Refers to `size.absolute.1px` A mobile device's maximum available screen width. Many older feature phones have screens smaller than this value.
max-width-breakpoint-tablet	`calc( 1120px - 1px )` Defined in `src/codex-base.json` Refers to `size.viewport.112` Refers to `size.absolute.1px` A tablet device's maximum available screen width. Note, the size chosen is eager to be re-evaluated with Web team and Product Analytics.
max-width-breakpoint-desktop	`calc( 1680px - 1px )` Defined in `src/codex-base.json` Refers to `size.viewport.168` Refers to `size.absolute.1px` A desktop device's maximum available screen width.

max-width-breakpoint-mobile

calc( 640px - 1px )

Defined in src/codex-base.json

Refers to size.viewport.64

Refers to size.absolute.1px

A mobile device's maximum available screen width. Many older feature phones have screens smaller than this value.

max-width-breakpoint-tablet

calc( 1120px - 1px )

Defined in src/codex-base.json

Refers to size.viewport.112

Refers to size.absolute.1px

A tablet device's maximum available screen width. Note, the size chosen is eager to be re-evaluated with Web team and Product Analytics.

max-width-breakpoint-desktop

calc( 1680px - 1px )

Defined in src/codex-base.json

Refers to size.viewport.168

Refers to size.absolute.1px

A desktop device's maximum available screen width.

Name	Value
width-breakpoint-mobile	`320px` deprecated Defined in `src/codex-base.json` Refers to `size.viewport.32` Deprecated: Legacy breakpoint. Use `min-width`/`max-width` breakpoint token instead. A mobile device's screen width. Many older feature phones have screens smaller than this value.
width-breakpoint-tablet	`720px` deprecated Defined in `src/codex-base.json` Refers to `size.viewport.72` Deprecated: Legacy breakpoint. Use `min-width`/`max-width` breakpoint token instead. A tablet device's screen width.
width-breakpoint-desktop	`1000px` deprecated Defined in `src/codex-base.json` Refers to `size.viewport.100` Deprecated: Legacy breakpoint. Use `min-width`/`max-width` breakpoint token instead. A desktop device's screen width.
width-breakpoint-desktop-wide	`1200px` deprecated Defined in `src/codex-base.json` Refers to `size.viewport.120` Deprecated: Legacy breakpoint. Use `min-width`/`max-width` breakpoint token instead. A wider desktop's screen width.
width-breakpoint-desktop-extrawide	`2000px` deprecated Defined in `src/codex-base.json` Refers to `size.viewport.200` Deprecated: Legacy breakpoint. Use `min-width`/`max-width` breakpoint token instead. An extra wide desktop's screen width.