Breakpoints CORE

Examples Setup
Source code

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: 37.4625em), (min-resolution: 192dpi) and (max-width: 37.4625em)
@tui-media-retina-tablet (-webkit-min-device-pixel-ratio: 2) and (max-width: 63.9625em), (min-resolution: 192dpi) and (max-width: 63.9625em)
@tui-media-retina-desktop (-webkit-min-device-pixel-ratio: 2) and (max-width: 84.9625em), (min-resolution: 192dpi) and (max-width: 84.9625em)
@tui-mobile screen and (max-width: 47.9625em)
@tui-mobile-min screen and (min-width: 22.5em)
@tui-mobile-interval (min-width: 22.5em) and (max-width: 47.9625em)
@tui-tablet screen and (max-width: 63.9625em)
@tui-tablet-min screen and (min-width: 48em)
@tui-tablet-interval (min-width: 48em) and (max-width: 63.9625em)
@tui-desktop screen and (max-width: 79.9625em)
@tui-desktop-min screen and (min-width: 64em)
@tui-desktop-interval (min-width: 64em) and (max-width: 79.9625em)
@tui-desktop-lg-min screen and (min-width: 80em)
@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