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
    
      
    

      
      
    

  
    
      <div class="wrapper">
    @for (breakpoint of breakpoints; track breakpoint) {
        <span [class]="`item ${breakpoint}`">&#64;{{ breakpoint }}</span>
    }
</div>

    

      
      
    

  
    
      @import '@taiga-ui/styles/utils.less';

.wrapper {
    display: grid;
    inline-size: 100%;
    gap: 1px;
    grid-template-columns: repeat(3, 1fr);
    margin: auto;
    font: var(--tui-typography-body-xs);

    @media @tui-desktop-min {
        font: var(--tui-typography-body-s);
        inline-size: 31.25rem;
    }
}

.item {
    display: flex;
    block-size: 6.25rem;
    background: var(--tui-background-neutral-1);
    color: var(--tui-text-primary);
    justify-content: center;
    align-items: center;
}

@breakpoints: 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;

each(@breakpoints, {
    .@{value} {
        @media @@value {
            background: var(--tui-background-accent-1);
            color: var(--tui-text-primary-on-accent-1);
        }
    }
});

.tui-desktop-lg-min {
    grid-column: span 3;
}
GitHub StackBlitz