LifeUI
1.53.2Breakpoints
Sistema de puntos de quiebre estandarizados para diseño responsivo
Uso
Los breakpoints se aplican mediante clases utilitarias siguiendo esta sintaxis:
// Sintaxis
screen-[token]:<div class="screen-mobile:hidden screen-tablet-lg:block" />Tokens
Token | Valor |
|---|---|
screen-mobile-xs | (min-width: 320px) |
screen-mobile-sm | (min-width: 360px) |
screen-mobile | (min-width: 375px) |
screen-mobile-lg | (min-width: 425px) |
screen-mobile-xl | (min-width: 540px) |
screen-tablet | (min-width: 720px) |
screen-tablet-md | (min-width: 768px) |
screen-tablet-lg | (min-width: 1024px) |
screen-laptop-sm | (min-width: 1280px) |
screen-laptop-lg | (min-width: 1440px) |
screen-desktop | (min-width: 1728px) |
screen-desktop-lg | (min-width: 1920px) |