Primer CSS es un marco CSS gratuito de código abierto que se basa en sistemas que crean la base de los elementos de estilo básicos, como el espaciado, la tipografía y el color. Este método sistemático garantiza que nuestros patrones sean estables e interoperables entre sí. Su enfoque de CSS está influenciado por los principios de CSS orientado a objetos, CSS funcional y arquitectura BEM. Es altamente reutilizable y flexible. Está creado con el sistema de diseño de GitHub.
En este artículo, aprenderemos sobre los márgenes receptivos de Primer CSS. Los márgenes de respuesta de Primer CSS se utilizan para admitir la capacidad de respuesta al tamaño de la pantalla, lo que básicamente significa que habrá diferentes márgenes para un elemento cuando se muestra en pantallas pequeñas, medianas, grandes o extragrandes.
Márgenes de respuesta utilizados Clase:
- m[dirección]-[punto de interrupción]-[espaciador]: esta clase se utiliza para proporcionar un margen en una dirección y un punto de interrupción determinados.
Sintaxis:
<div class="m[direction]-[breakpoint]-[spacer]" >
Content
</div>
- [dirección]: este valor puede ser;
- x: Indica los márgenes derecho e izquierdo
- y: Indica los márgenes superior e inferior
- t: Indica márgenes superiores
- b: Indica márgenes inferiores
- r: Indica márgenes derechos
- l: Indica márgenes izquierdos
- [punto de interrupción]: este valor se puede utilizar para representar
- SM: Dispositivos pequeños
- md: Dispositivos medianos
- lg: dispositivos grandes
- xl: dispositivos extragrandes
- [spacer]: Este valor varía de 0 a 6 lo que indica cuánto margen queremos.
- 0: proporciona un margen de 0px
- 1: proporciona un margen de 4px
- 2: proporciona un margen de 8px
- 3: proporciona un margen de 16 px
- 4: proporciona un margen de 24 px
- 5: proporciona un margen de 32 px
- 6: proporciona un margen de 40 px
Ejemplo 1: En este ejemplo, mostraremos diferentes márgenes en pantallas pequeñas y grandes en las direcciones x e y, es decir, tanto arriba como abajo.
HTML
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width = device-width, initial-scale = 1"> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@16.3.0/dist/primer.css"> </head> <body> <h1 style="color:green">GeeksforGeeks</h1> <h3>Primer CSS Responsive Margins</h3> <div class="color-bg-success " style="width: 50%;"> Hi Geek! <div class="mx-sm-4 my-lg-6 mx-lg-4 color-bg-warning"> GeeksforGeeks </div> </div> </body> </html>
Producción:
Ejemplo 2: En este ejemplo, mostraremos diferentes márgenes en pantallas pequeñas y grandes en las direcciones superior e inferior.
HTML
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width = device-width, initial-scale = 1"> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@16.3.0/dist/primer.css"> </head> <body> <h1 style="color:green">GeeksforGeeks</h1> <h3>Primer CSS Responsive Margins</h3> <div class="color-bg-success " style="width: 50%;"> Hi Geek! <div class="mt-sm-4 mb-lg-6 color-bg-warning"> GeeksforGeeks </div> Bottom Margin </div> </body> </html>
Producción:
Referencia: https://primer.style/css/utilities/margin#responsive-margins
Publicación traducida automáticamente
Artículo escrito por nikitamehrotra99 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA