Convertidor VW a PX - 100% Gratis

<script setup>
import { ref, computed, onMounted } from 'vue'

const anchoViewport = ref(window.innerWidth)

// Convierte VW a PX dinámicamente
const vwAPx = (vw) => {
  return (vw * anchoViewport.value) / 100
}

// Reactivo: se actualiza al cambiar el tamaño
const anchoCarta = computed(() => vwAPx(90))

onMounted(() => {
  window.addEventListener('resize', () => {
    anchoViewport.value = window.innerWidth
  })
})
</script>

<template>
  <div :style="{ width: anchoCarta + 'px' }">
    Carta Responsive
  </div>
</template>

<template>
  <v-container fluid>
    <v-row>
      <v-col
        cols="12"
        md="6"
        class="columna-fluida"
      >
        Contenido que escala con VW
      </v-col>
    </v-row>
  </v-container>
</template>

<style scoped>
.columna-fluida {
  padding: clamp(1rem, 2vw, 3rem);
  font-size: clamp(14px, 1.5vw, 18px);
}

/* En móvil: padding 16px, texto 14px */
/* En escritorio: padding 48px, texto 18px */
</style>

/* assets/css/main.css */
:root {
  /* Sistema de espaciado fluido */
  --espacio-xs: clamp(0.25rem, 0.5vw, 0.5rem);
  --espacio-sm: clamp(0.5rem, 1vw, 1rem);
  --espacio-md: clamp(1rem, 2vw, 2rem);
  --espacio-lg: clamp(2rem, 4vw, 4rem);
  --espacio-xl: clamp(3rem, 6vw, 6rem);

  /* Tipografía fluida */
  --texto-sm: clamp(0.875rem, 1vw, 1rem);
  --texto-base: clamp(1rem, 1.5vw, 1.125rem);
  --texto-lg: clamp(1.25rem, 2vw, 1.5rem);
  --texto-xl: clamp(1.5rem, 3vw, 2.25rem);
}

/* Usar en cualquier componente */
.seccion {
  padding: var(--espacio-lg);
  font-size: var(--texto-base);
}

<style scoped>
.page-enter-active,
.page-leave-active {
  transition: all 0.3s ease;
}

.page-enter-from {
  /* En móvil: 37.5px, escritorio: 96px */
  transform: translateX(10vw);
  opacity: 0;
}

.page-leave-to {
  transform: translateX(-10vw);
  opacity: 0;
}
</style>