Fundación - Consultas de medios

Las consultas de medios son un módulo CSS3 que incluye características de medios como ancho, alto, color y muestra el contenido según la resolución de pantalla especificada.

Foundation utiliza las siguientes consultas de medios para crear rangos de desglose:

  • Small - Utilizado para cualquier pantalla.

  • Medium - Se utiliza para pantallas de 640 píxeles y más anchas.

  • Large - Se utiliza para pantallas de 1024 píxeles y más anchas.

Puede cambiar el tamaño de la pantalla utilizando las clases de puntos de interrupción . Por ejemplo, puede usar la clase .small-6 para pantallas de tamaño pequeño y la clase .medium-4 para pantallas de tamaño mediano, como se muestra en el siguiente fragmento de código:

<div class = "row">
   <div class = "small-6 medium-4 columns"></div>
   <div class = "small-6 medium-8 columns"></div>
</div>

Cambiar los puntos de interrupción

Puede cambiar los puntos de interrupción, si su aplicación utiliza la versión SASS de Foundation. Puede colocar el nombre de los puntos de interrupción debajo de la variable $ puntos de interrupción en el archivo de configuración como se muestra a continuación:

$breakpoints: (
   small: 0px,
   medium: 640px,
   large: 1024px,
   xlarge: 1200px,
   xxlarge: 1440px,
);

Puede cambiar las clases de puntos de interrupción en el archivo de configuración modificando la variable $ breakpoint-classes . Si desea utilizar la clase .large en el CSS, agréguela al final de la lista como se muestra a continuación:

$breakpoints-classes: (small medium large);

Supongamos que desea utilizar la clase .xlarge en el CSS y luego agregar esta clase al final de la lista como se muestra a continuación:

$breakpoints-classes: (small medium large xlarge);

HABLAR CON DESCARO A

El Breakpoint Mixin

  • Puede escribir las consultas de medios utilizando breakpoint () mixin junto con @include .

  • Utilice las palabras clave down o only junto con el valor del punto de interrupción para cambiar el comportamiento de la consulta de medios como se muestra en el siguiente formato de código:

.class_name {
   // code for medium screens and smaller
   @include breakpoint(medium down) { }
   
   // code for medium screens only
   @include breakpoint(medium only) { }
}

Puede utilizar tres consultas de medios vertical , horizontal y retina para la orientación del dispositivo o la densidad de píxeles y no son consultas de medios basadas en el ancho.

Función de punto de interrupción

  • Puede usar la funcionalidad de breakpoint () mixin usando la función interna.

  • La funcionalidad breakpoint () se puede utilizar directamente para escribir sus propias consultas de medios:

@media screen and #{breakpoint(medium)} {
   // code for medium screens and up styles
}

JavaScript

Trabajar con consultas de medios

  • Foundation JavaScript proporciona la función MediaQuery.current para acceder al nombre del punto de interrupción actual en el objeto Foundation.MediaQuery como se especifica a continuación:

Foundation.MediaQuery.current

  • La función MediaQuery.current muestra pequeños , medianos , grandes como nombres de puntos de interrupción actuales.

  • Puede obtener la consulta de medios del punto de interrupción utilizando la función MediaQuery.get como se muestra a continuación:

Foundation.MediaQuery.get('small')

Referencia de Sass

Variables

La siguiente tabla enumera las variables SASS, que se pueden utilizar para personalizar los estilos predeterminados del componente:

No Señor. Nombre y descripción Tipo Valor por defecto
1

$breakpoints

Es un nombre de punto de interrupción que se puede usar para escribir las consultas de medios usando breakpoint () mixin.

 Mapa

pequeño: 0px

medio: 640px

grande: 1024px

xlarge: 1200px

xxlarge: 1440px
2

$breakpoint-classes

Puede cambiar la salida de la clase CSS modificando la variable $ breakpoint-classes .

 Lista pequeño mediano Grande

Mixins

Mixins crea un grupo de estilos para construir su estructura de clases CSS para los componentes de Foundation.

BREAKPOINT

Utiliza breakpoint () mixin para crear consultas de medios e incluye las siguientes actividades:

  • Si se pasa una cadena, mixin busca la cadena en el mapa $ breakpoints y crea la consulta de medios.

  • Si está usando un valor de píxel, conviértalo a valor em usando $ rem-base .

  • Si se pasa el valor rem, cambia su unidad a em.

  • Si está usando el valor em, entonces se puede usar tal como está.

La siguiente tabla especifica el parámetro utilizado por el punto de interrupción:

No Señor. Nombre y descripción Tipo Valor por defecto
1

$value

Procesa los valores usando el nombre del punto de interrupción, px, rem o valores em.

 palabra clave o número Ninguna

Funciones

BREAKPOINT

Utiliza breakpoint () mixin para crear consultas de medios con un valor de entrada coincidente.

La siguiente tabla especifica el posible valor de entrada utilizado por el punto de interrupción:

No Señor. Nombre y descripción Tipo Valor por defecto
1

$val

Procesa los valores usando el nombre del punto de interrupción, px, rem o valores em.

 palabra clave o número pequeña

Referencia de JavaScript

Funciones

Hay dos tipos de funciones:

  • .atLeast- Mira la pantalla. Debe ser ancho al menos como punto de interrupción.

  • .get - Se utiliza para obtener la consulta de medios del punto de interrupción.

La siguiente tabla especifica el parámetro utilizado por las funciones anteriores:

No Señor. Nombre y descripción Tipo
1

size

Comprueba y obtiene el nombre del punto de interrupción para las funciones especificadas respectivamente.

 Cuerda