Foundation CSS es un marco front-end receptivo y de código abierto creado por la fundación ZURB en septiembre de 2011, que facilita el diseño de hermosos sitios web, aplicaciones y correos electrónicos receptivos que se ven increíbles y pueden ser accesibles para cualquier dispositivo. El marco se basa en un arranque similar a SaaS. Es más sofisticado, flexible y fácilmente personalizable. También viene con CLI, por lo que es fácil de usar con paquetes de módulos. Ofrece la herramienta Fastclick.js para una renderización más rápida en dispositivos móviles. Es utilizado por muchas empresas como Facebook, eBay, Mozilla, Adobe e incluso Disney. El marco se basa en un arranque similar a SaaS. Es más sofisticado, flexible y fácilmente personalizable. También viene con CLI, por lo que es fácil de usar con paquetes de módulos. Ofrece la herramienta Fastclick.js para una renderización más rápida en dispositivos móviles.
Las consultas de medios de Foundation CSS incluyen funciones de medios como ancho , alto , color y muestran el contenido según la resolución de pantalla especificada. En resumen, esta característica hace que el diseño receptivo realmente funcione.
Consultas de medios predeterminadas: Foundation utiliza las siguientes consultas de medios predeterminadas, que son los tres puntos de interrupción principales:
- pequeño: esta clase de punto de interrupción de consulta de medios es verdadera para cualquier pantalla.
- medio: esta clase de punto de interrupción de consulta de medios es verdadera para pantallas de 640 píxeles y más anchas.
- grande: esta clase de punto de interrupción de consulta de medios es verdadera para pantallas de 1024 píxeles y más anchas.
Sin embargo, muchos componentes se pueden modificar en diferentes tamaños de pantalla utilizando clases especiales de punto de interrupción . Uno de los ejemplos más comunes puede ser la cuadrícula. En el siguiente código, la columna de la izquierda tiene seis columnas de ancho en pantallas pequeñas, por lo tanto, .small-6 . En pantallas de tamaño mediano, la clase .medium-4 anula el estilo pequeño y, por lo tanto, cambia la columna para que tenga cuatro columnas de ancho.
Sintaxis:
<div class="grid-x grid-margin-x"> <div class="cell small-6 medium-4">...</div> </div>
Versión CSS: si usa la versión CSS de Foundation CSS, debe usar las siguientes consultas de medios para seguir los puntos de interrupción principales:
/* Small only */
@media screen and (max-width: 39.9375em) {}
/* Medium and up */
@media screen and (min-width: 40em) {}
/* Medium only */
@media screen and (min-width: 40em) and (max-width: 63.9375em) {}
/* Large and up */
@media screen and (min-width: 64em) {}
/* Large only */
@media screen and (min-width: 64em) and (max-width: 74.9375em) {}
Ejemplo 1:
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Foundation CSS Default Media Queries</title> <!-- Compressed CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"/> <!-- Compressed JavaScript --> <script src= "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"> </script> <script src= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js"> </script> </head> <body style="padding:2rem 1rem;"> <center> <h1 style="color:green;">GeeksforGeeks</h1> <h3>Foundation CSS Default Media Queries</h3> <div class="grid-x grid-margin-x"> <div class="cell small-6 medium-4"> Helloworld This is line 01. </div> <div class="cell small-6 medium-4"> Helloworld This is line 02. </div> <div class="cell small-6 medium-4"> Helloworld This is line 03. </div> <div class="cell small-6 medium-4"> Helloworld This is line 04. </div> <div class="cell small-6 medium-4"> Helloworld This is line 05. </div> <div class="cell small-6 medium-4"> Helloworld This is line 06. </div> </div> </center> <script> $(document).foundation(); </script> </body> </html>
Producción:
Consulta de medios predeterminada de Foundation CSS
Ejemplo 2:
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Foundation CSS Default Media Queries</title> <!-- Compressed CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"/> <!-- Compressed JavaScript --> <script src= "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"> </script> <script src= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js"> </script> </head> <body style="padding:2rem 1rem;"> <center> <h1 style="color:green;">GeeksforGeeks</h1> <h3>Foundation CSS Default Media Queries</h3> <div class="grid-x grid-margin-x"> <div class="cell small-2 medium-8"> Helloworld This is line 01. </div> <div class="cell small-2 medium-8"> Helloworld This is line 02. </div> <div class="cell small-2 medium-8"> Helloworld This is line 03. </div> <div class="cell small-2 medium-8"> Helloworld This is line 04. </div> <div class="cell small-2 medium-8"> Helloworld This is line 05. </div> <div class="cell small-2 medium-8"> Helloworld This is line 06. </div> </div> </center> <script> $(document).foundation(); </script> </body> </html>
Producción:
Consulta de medios predeterminada de Foundation CSS
Referencia: https://get.foundation/sites/docs/media-queries.html#default-media-queries
Publicación traducida automáticamente
Artículo escrito por vividhpandey13 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA