Ajuste Global de Tipografia Responsiva

Para adaptar elementos à mudança de dimensões da janela, adicione um listener de redimensionamento global no ponto de entrada da aplicação:

function ajustarEscala() {
  const baseFonte = 50;
  const larguraBase = 375;
  const larguraAtual = document.body.getBoundingClientRect().width;
  
  if (window.location.href.includes("painelAdministrativo")) {
    return; // Desativa redimensionamento em páginas específicas
  }
  
  const escala = larguraAtual / larguraBase * baseFonte;
  document.documentElement.style.fontSize = `${escala}px`;
}

window.addEventListener('resize', ajustarEscala);
ajustarEscala(); // Executa inicialmente

Atualização Dinâmica de Componentes Vue

Para componentes que dependme de dimensões específicas, implemente:

1. Armazene dimensões da janela no Vuex
2. Monitore alterações com window.onresize
3. Force atualização de componentes filhos via chaves reativas

<template>
  <div>
    <div ref="cabecalho"></div>
    <div ref="principal">
      <GraficoEstatistico :key="chaves.grafico1" />
      <PainelDados :key="chaves.grafico2" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      chaves: { grafico1: 0, grafico2: 0 },
      parametrosMapa: {}
    };
  },
  mounted() {
    this.atualizarDimensoes = () => {
      this.$store.commit('definirLargura', document.body.clientWidth);
      this.$store.commit('definirAltura', document.body.clientHeight);
    };
    
    window.addEventListener('resize', this.atualizarDimensoes);
    this.atualizarDimensoes();
  },
  computed: {
    dimensoes() {
      return [this.$store.state.larguraJanela, this.$store.state.alturaJanela];
    }
  },
  watch: {
    dimensoes() {
      this.ajustarLayout();
      
      // Reinicializa componentes filhos
      Object.keys(this.chaves).forEach(chave => {
        this.chaves[chave] += 1; 
      });
    }
  },
  methods: {
    ajustarLayout() {
      const altCabecalho = 60;
      const altPrincipal = window.innerHeight - altCabecalho;
      const altPainel = altPrincipal - 80;
      const largPainel = window.innerWidth * 0.25;

      this.$refs.cabecalho.style.height = `${altCabecalho}px`;
      this.$refs.principal.style.height = `${altPrincipal}px`;
      
      // Configura elementos adicionais conforme necessário
    }
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.atualizarDimensoes);
  }
};
</script>

Principais técnicas utilizadas:

• Uso de :key em componentes para forçar recriação
• Cálculo dinâmico de dimensões baseado em clientWidth/clientHeight
• Armazenamento centralizado de estado com Vuex para sincronização entre componentes