Taiga UI 5.0 is out!

Breakpoints CORE

Examples Setup GitHub

Breakpoints are widths that determine how your responsive layout behaves across different viewport sizes.

Our library includes the following breakpoints:
name value
@tui-media-retina (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)
@tui-media-retina-mobile (-webkit-min-device-pixel-ratio: 2) and (max-width: 599.4px), (min-resolution: 192dpi) and (max-width: 599.4px)
@tui-media-retina-tablet (-webkit-min-device-pixel-ratio: 2) and (max-width: 1023.4px), (min-resolution: 192dpi) and (max-width: 1023.4px)
@tui-media-retina-desktop (-webkit-min-device-pixel-ratio: 2) and (max-width: 1359.4px), (min-resolution: 192dpi) and (max-width: 1359.4px)
@tui-mobile screen and (max-width: 767.4px)
@tui-mobile-min screen and (min-width: 360px)
@tui-mobile-interval (min-width: 360px) and (max-width: 767.4px)
@tui-tablet screen and (max-width: 1023.4px)
@tui-tablet-min screen and (min-width: 768px)
@tui-tablet-interval (min-width: 768px) and (max-width: 1023.4px)
@tui-desktop screen and (max-width: 1279.4px)
@tui-desktop-min screen and (min-width: 1024px)
@tui-desktop-interval (min-width: 1024px) and (max-width: 1279.4px)
@tui-desktop-lg-min screen and (min-width: 1280px)
@tui-touch (hover: none) and (pointer: coarse)
@tui-stylus (hover: none) and (pointer: fine)
@tui-pointer (hover: hover) and (pointer: coarse)
@tui-mouse (hover: hover) and (pointer: fine)

Usage

@tui-mobile@tui-mobile-min@tui-mobile-interval@tui-tablet@tui-tablet-min@tui-tablet-interval@tui-desktop@tui-desktop-min@tui-desktop-interval@tui-desktop-lg-min
GitHub StackBlitz