Trabajar con los puntos de interrupción en Drupal 8

 

No hay interfaz de usuario para la edición de puntos de interrupción en Drupal 8.

 

 

Ya que los puntos de interrupción son de config, no es posible proporcionar una interfaz de usuario en contrib.

 

 

Los puntos de interrupción se utilizan para separar la altura o anchura de las ventanas de puertos (pantallas, impresoras y otros tipos de salidas) y prepararse para ajustar un diseño de respuesta con el fin de visualizar correctamente en diferentes dispositivos.

 

 

El módulo de puntos de interrupción normaliza el uso de puntos de interrupción, y permite a los módulos y temas exponer o utilizar cualquier punto de interrupción. El módulo de punto de interrupción realiza un seguimiento de la altura, anchura y resolución de la interrupción.

 

Terminología

 

Punto de interrupción

 

Un punto de interrupción consiste en una etiqueta y una consulta de medios.

 

 

Las consultas de medios son una manera formal de codificar los puntos de interrupción.

 

 

Por ejemplo, un punto de interrupción de anchura 40em se escribe como la consulta de medios '(min-width: 40em)'.

 

 

Los puntos de interrupción en realidad sólo son algunas preguntas de los medios con metadatos adicionales, como el nombre y la información multiplicador.

 

Los temas y los módulos pueden definir puntos de interrupción creando un archivo de configuración llamado myThemeOrModule.breakpoints.yml, dónde myThemeOrModule es el nombre del tema o módulo.

 

 

Cada entrada en este archivo define un punto de interrupción, que consta de un nombre de equipo, por el que se identifica de forma única la entrada del punto de interrupción por ejemplo bartik.mobile, Y es los niños que definen las propiedades del punto de ruptura:

 

 

  1. etiqueta - etiqueta legible para el punto de interrupción.

  2. media Query - texto de consulta de medios ("todo correcto y (min-width: 851px)".

  3. peso - peso posicional (Fin) para el punto de interrupción.

  4. multiplicadores - Con el apoyo de píxeles de resolución de multiplicadores.

 

Nota: El orden en el que los puntos de interrupción se organizan a través de su valor de peso es extremadamente importante.

 

 

Los puntos de interrupción con el menor min-width deben tener el peso menor, mientras que los puntos de interrupción con la mayor min-width deben tener un valor de peso mayor.

 

 

Por defecto, los módulos ordenarán los puntos de interrupción de menor a mayor.

 

 

Sin embargo, los módulos pueden invertir ese orden si fuera necesario: por ejemplo, el módulo de imagen sensible se ocupa de reordenar los puntos de interrupción de mayor a menor en función del valor del peso.

 

Ejemplo

(bartik.breakpoints.yml):

bartik.mobile:
 label: mobile
 mediaQuery: ''
 weight: 0
 multipliers:
   - 1x
bartik.narrow:
 label: narrow
 mediaQuery: 'all and (min-width: 560px) and (max-width: 850px)'
 weight: 1
 multipliers:
   - 1x
bartik.wide:
 label: wide
 mediaQuery: 'all and (min-width: 851px)'
 weight: 2
 multipliers:
   - 1x

 

Grupo de punto de interrupción

Páginas

Total de votos: 33

Entradas relacionadas

Comentarios (0)

Deja un comentario