Media queries

Screens

Usamos tres breakpoints simplificados según el dispositivo: mobile (sm), tablet (md) y desktop (lg). Estos se diferencian por el tamaño de la pantalla en píxeles. Se utilizan para diseñar directamente en los breakpoints o para diferenciar las clases utilitarias.

Nota En este ejemplo, puedes ver cómo se usan y combinan los breakpoints. Solo se pueden combinar mobile con tablet o tablet con desktop.

Mobile Tablet Desktop

Code

768px

1024px

Departamento en venta San Borja 535, Ciudad de México

Departamento en venta San Borja 535, Ciudad de México

Departamento en venta San Borja 535, Ciudad de México

Scss

            
            @include media-mobile { ... }
            
          

            
            @include media-tablet(screen) { ... }
            
          

            
            @include media-desktop { ... }
            
          

            
            @include media-tablet(down) { ... }
            
          

            
            @include media-tablet(up) { ... }
            
          

Target

Además del uso básico, podemos emplear media queries más específicas, como las relacionadas con el dispositivo, la orientación, la entrada táctil, etc.

Ejemplo