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.1` 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.1` 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.1` 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.1

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.1

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.1

A desktop device's maximum available screen width.

Name	Value
width-breakpoint-mobile deprecated	`320px` Defined in `src/codex-base.json` Refers to `min-width.breakpoint.mobile` 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. (use `min-width-breakpoint-mobile` instead)
width-breakpoint-tablet deprecated	`720px` 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. (use `size-viewport-72` instead)
width-breakpoint-desktop deprecated	`1000px` 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. (use `size-viewport-100` instead)
width-breakpoint-desktop-wide deprecated	`1200px` 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. (use `size-viewport-120` instead)
width-breakpoint-desktop-extrawide deprecated	`2000px` 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. (use `size-viewport-200` instead)