¿Cambiar el tamaño de fuente en Vuetify según la ventana gráfica?

Si encuentras alguna incompatibilidad en tu código o trabajo, recuerda probar siempre en un entorno de testing antes subir el código al proyecto final.

Solución:

Puede aplicar la clase en función de la ventana gráfica

:class="'subheading': $vuetify.breakpoint.xs"

Puede usar el objeto Breakpoint, proporcionado y rastreado por el propio Vuetify. Citando los documentos:

Vuetify convierte los puntos de interrupción disponibles en un objeto accesible desde su aplicación. Esto le permitirá asignar/aplicar propiedades específicas y attributes basado en el tamaño de la ventana gráfica.

Una forma posible (y bastante directa) se menciona en la misma página de documentos: usar la propiedad calculada para calcular el tamaño de fuente:

computed: 
  fontSize() 
    switch (this.$vuetify.breakpoint.name) 
      case 'xs': return '3em';
      default: return '5em';
    
  

… y úsalo en tu plantilla directamente. Por supuesto, puede hacer lo mismo con el nombre de clase dinámico en su lugar, aplicado en $vuetify.breakpoint.xsOnlypor ejemplo.

Yo también he estado tratando de resolver este acertijo, ya que se siente asqueroso llegar a javascript para manejar cambios de estilo simples para diferentes tamaños de dispositivos.

Resulta que generar reglas CSS personalizadas para diferentes puntos de interrupción es bastante fácil porque Vuetify aprovecha Stylus y asigna los puntos de interrupción a una variable de Stylus. Naturalmente, esta variable está disponible en sus componentes personalizados de vue y archivos de estilo (siempre que tenga la configuración de preprocesador adecuada para compilar el lápiz óptico).

Aquí hay algunos recursos que me ayudaron a entender mejor las cosas:

1. Configuración del preprocesador:

   • https://vuetifyjs.com/en/framework/theme#setup-stylus-loader-with-webpack
   • En mi caso, al usar Nuxt, la configuración del preprocesador para el lápiz óptico ya estaba configurada para mí. Pero para que este enfoque funcione, deberá asegurarse de poder compilar Stylus.

2. Modificación de las variables de Stylus – Vuetify:

   • https://vuetifyjs.com/en/framework/theme#modificando-stylus-variables
   • En esta página, encontrará un enlace a todas las variables de stylus que Vuetify está incorporando: https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/stylus/settings/_variables.styl

3. Stylus @media consultas – http://stylus-lang.com/docs/media.html

Como verá, el objeto Stylus de $display-breakpoints es su nuevo mejor amigo.

Reduzca todo, y esto es lo que obtiene en un componente de archivo único de Vue:

Observe en el código anterior, estamos cambiando el tamaño de fuente del centrándolo en nuestras consultas de medios de Stylus y utilizando el objeto $display-breakpoints para identificar el punto de interrupción deseado.

Creo que el beneficio de no tener un marco de interfaz de usuario que genere todas las opciones en cada punto de interrupción es un archivo mucho más pequeño para cargar. Parece que Vuetify+Stylus es un enfoque más ligero que hace que escribir consultas @media personalizadas sea el enfoque más simple y eficiente.

Si haces scroll puedes encontrar las anotaciones de otros sys admins, tú igualmente tienes la opción de dejar el tuyo si lo deseas.

---

---

Utiliza Nuestro Buscador