Convertir vw a px Viewport width ↔ Pixels Gratis En línea Seguro
Escriba un valor en vw y léalo al instante en px. La cuenta se hace en su navegador, no se envía nada a ninguna parte, y de qué depende el resultado está escrito más abajo en vez de darse por supuesto.
No se sube nada
Tamaños habituales — Convertir vw a px
| vw | px |
|---|---|
| 0.5 | 7.2 |
| 1 | 14.4 |
| 2 | 28.8 |
| 5 | 72 |
| 10 | 144 |
| 25 | 360 |
| 50 | 720 |
| 100 | 1440 |
De dónde vienen estas unidades
El píxel de CSS no es el píxel de su pantalla. Cuando las pantallas dejaron de tener una densidad previsible, una página medida en píxeles reales se convirtió en una página que encogía a medida que las pantallas se afinaban, así que el píxel CSS se redefinió como una longitud de referencia: alrededor de 1/96 de pulgada, visto a una distancia cómoda de lectura. Todo lo demás de esta página se asienta en eso. El em es más viejo que la web —en tipos de plomo era el ancho de un bloque fundido, llamado así por la M mayúscula— y en CSS significa el tamaño de letra vigente, razón por la cual cambia al anidar elementos. El rem se añadió precisamente para escapar de ello: es el em del elemento raíz y nunca se compone. El vw llegó con el diseño adaptable: una centésima del ancho de la ventana, sea cual sea.
Dónde se las encuentra
Estas son las unidades de cualquier hoja de estilo. Los píxeles dimensionan bordes, sombras y todo lo que no debe escalar; el rem dimensiona la tipografía, los espaciados y la maquetación, de modo que un solo cambio en la raíz redimensiona una interfaz entera; el em dimensiona lo que debe seguir a su propio texto, como el relleno de un botón; el vw dimensiona titulares y cabeceras que han de llenar la pantalla en cualquier dispositivo. Convertir entre ellos es la aritmética diaria de volver una maqueta entregada en píxeles una hoja de estilo que escala.
Preguntas frecuentes
¿Por qué 16 px es el punto de partida habitual?
Porque es el tamaño de texto por omisión en todos los navegadores importantes, y una hoja de estilo que no lo cambia lo hereda. Un rem equivale por tanto a 16 px con el ajuste por omisión, y de ahí vienen las conversiones familiares: 0,5 rem son 8 px, 1,5 rem son 24 px. Si un usuario ha agrandado ese valor en los ajustes de su navegador, esos mismos valores en rem crecen con él, que es justamente para lo que sirven.
¿Debo usar rem o em?
Rem para todo lo que deba seguir a la página en conjunto —escala tipográfica, espaciados, anchos de maquetación—, porque se mide desde la raíz y nunca se acumula. Em para todo lo que deba seguir al texto en que está: el relleno de un botón, el hueco junto a un icono, la sangría de una cita. El error común es anidar elementos dimensionados en em: 1,2 em dentro de 1,2 em se vuelve 1,44, luego 1,73, hasta que el texto del pie de página mide el doble de lo previsto.
¿El resultado es exacto?
Donde ambas unidades se definen una por otra con números enteros, sí: la página lo dice encima de la cifra, y el único redondeo está en cuántos dígitos se muestran. Donde la razón no tiene decimal finito, la página muestra doce cifras significativas y califica la relación de aproximada en vez de fingir otra cosa.
¿Algo de lo que escribo sale de mi dispositivo?
No. La aritmética se hace en su navegador; no se sube nada, y tampoco hay servidor que lo reciba. Cargada una vez, la página sigue funcionando con la red apagada.
Por qué convertir vw a px
Una hoja de estilos dice font-size: 5.2vw en el título de una cabecera, margin-top: 8vw en una sección y width: 42vw en una imagen. Son valores flexibles, y no le dicen qué hay en la pantalla. ¿Qué tamaño tiene el título en un teléfono? ¿Cuánto mide de ancho la imagen en un portátil? ¿Queda bien el margen a 1920 píxeles? Para averiguarlo se convierte vw a px: se multiplica el número por el ancho de la ventana, se divide entre cien y se lee la respuesta en la unidad que usan los diseñadores, los probadores y los clientes. Es lo que se hace al revisar código fluido, al comprobar una versión frente a una maqueta o al explicar a un colega por qué el encabezado se ve pequeño en una pantalla estrecha.
Lo que hace diferente esta conversión de la de rem o em es que el multiplicador es la propia ventana. Un vw es una centésima del ancho de la ventana de visualización, así que 5.2vw son 52 px en una ventana de 1000 px de ancho, 18.7 px en un teléfono de 360 px de ancho y 99.8 px en un monitor ancho de 1920. No hay ningún valor por defecto al que recurrir, y el ancho cambia cuando el lector gira el teléfono o arrastra la ventana. El conversor pide por tanto el ancho, lo muestra junto a la respuesta y empieza en 1440 px, un ancho en el que a menudo se dibujan los diseños.
El cálculo se hace en su navegador, y no se sube nada. Más abajo encontrará la fórmula, lo que la conversión conserva y lo que no puede conservar, cómo leer una hoja de estilos fluida a varios anchos, la trampa de la barra de desplazamiento, el problema de accesibilidad del texto en vw puro y algunos hábitos que mantienen comprensible el código fluido.
La fórmula y el ancho
px es igual a vw multiplicado por el ancho, dividido entre cien
La fórmula es px = vw × ancho ÷ 100. A un ancho de 1440 px, 10 vw se convierte en 144 px, 5 vw en 72 px y 1.667 vw en 24 px. La página imprime el ancho junto al resultado, así que una línea como 10 vw = 144 px (1440 px) le dice qué se supuso. Para ver otra pantalla, cambie el ancho y lea de nuevo el resultado.
Qué anchos probar
Un conjunto útil para comprobar es 360 o 390 para teléfonos, 768 para una tableta en vertical, 1024 para un portátil pequeño, 1440 para un portátil o un ordenador de sobremesa típico y 1920 para un monitor de alta definición completa. Escriba cada uno en el campo del ancho y anote el resultado. Cinco lecturas le muestran todo el rango de un valor, y cualquier extremo salta a la vista.
Usar el ancho de la ventana real
En las herramientas de desarrollo de su navegador, la barra de dispositivos muestra el ancho de la ventana en píxeles. Use ese número para comparar lo que hace la página con lo que dice el conversor. Si coinciden, su lectura de la hoja de estilos es correcta.
Lo que la conversión conserva y lo que no puede
Conserva la proporción de la pantalla
Un vw es una centésima del ancho de la ventana de visualización, así que un tamaño escrito en vw crece y se encoge con la ventana en lugar de quedarse quieto. El valor en píxeles que obtiene es esa proporción hecha concreta para un ancho en particular.
No puede dar un valor por defecto
A diferencia de rem, vw no tiene valor por defecto. Un navegador da al tamaño de fuente raíz 16 px cuando nadie dice otra cosa, así que una página en rem puede partir de un número real; el ancho de la ventana es simplemente lo ancha que sea la ventana del lector, y cambia cuando gira el teléfono. Los 1440 px de aquí son un ancho en el que a menudo se dibujan los diseños, un hábito y no un estándar. Escriba el suyo.
Redondeo
Multiplicar por el ancho y dividir entre 100 puede producir decimales. 6.67 vw a 1440 px son 96.048 px. Los navegadores manejan píxeles fraccionarios, pero si necesita un número entero para un archivo de diseño, redondee y anote que el redondeo es suyo.
Leer una hoja de estilos fluida
Tome tres anchos y anote los resultados
Elija un ancho estrecho, uno medio y uno amplio, por ejemplo 375, 1024 y 1920. Para cada valor vw importante de la hoja de estilos, convierta vw a px a cada ancho y anote los tres números. Un encabezado de 5.2 vw da 19.5, 53.2 y 99.8 píxeles. Visto así, sabe si el encabezado es legible en el extremo estrecho y no abrumador en el amplio.
Busque clamp
El código fluido bien escrito pone límites alrededor de vw con clamp(min, preferido, max). Si ve clamp(2rem, 1rem + 4vw, 6rem), el tamaño crece entre 32 y 96 px y se mantiene en ambos extremos. Cuando convierta la parte vw, recuerde que es solo el centro del rango, y que los límites deciden lo que ocurre en los bordes.
Compruebe los extremos
Los anchos arriesgados son el menor y el mayor. A 320 px un encabezado de 6 vw son 19 px; a 2560 son 154 px. Si ninguno de los dos resulta aceptable y no hay clamp, la hoja de estilos necesita límites.
Trampas al convertir vw a px
La barra de desplazamiento
En los navegadores de escritorio, el ancho de la ventana de visualización usado para vw incluye el ancho de la barra de desplazamiento vertical. Así, 100vw es algo más ancho que el área visible cuando la página se desplaza, en unos 15 a 17 píxeles en muchos sistemas. El valor en píxeles que calcula es por tanto algo mayor que el ancho visible que parece representar. En los teléfonos, donde las barras de desplazamiento se superponen a la página, el efecto no existe.
Usar el ancho equivocado
El resultado es tan correcto como el ancho que escriba. Si su ventana de prueba mide 1366 px de ancho y convierte a 1440, todos los valores se desvían en torno a un cinco por ciento. Lea el ancho real en las herramientas de desarrollo.
Confundir vw con porcentaje
Un ancho del 50% se refiere al ancho del padre, mientras que 50vw se refiere a la ventana. Dentro de un contenedor estrecho los dos son muy diferentes. El conversor da la respuesta en vw; si su elemento está dentro de un contenedor, el padre puede ser más estrecho que la ventana.
Olvidar que el texto en vw no se puede ampliar
El texto dimensionado solo en vw no responde cuando el lector amplía la página, porque la ventana y el texto cambian de escala juntos. Las pautas de accesibilidad piden que el texto pueda redimensionarse. Añada un término en rem, como en clamp(), para que el texto responda también al zoom.
Preguntas que la gente se hace antes de convertir
¿Cuántos píxeles es 1 vw?
Una centésima del ancho de la ventana: 14.4 px a 1440, 10 px a 1000, 3.6 px a 360.
¿Cuántos píxeles son 50 vw?
La mitad de la ventana: 720 px con 1440 de ancho, 500 px con 1000 de ancho.
¿Por qué mi página es más ancha que la pantalla?
Una caja de 100vw en una página que se desplaza es más ancha que el área visible porque se cuenta la barra de desplazamiento. Use 100% dentro de un contenedor en su lugar.
¿Es vw lo mismo que un porcentaje?
No. El porcentaje se refiere al padre, vw a la ventana.
¿Se sube mi número?
No. La aritmética se ejecuta en su navegador y no se envía nada a ninguna parte.
¿Cómo vuelvo atrás?
Con px a vw, que divide entre el ancho en lugar de multiplicar.
Valores comunes a anchos comunes
Una tabla mental
Ayuda conocer unos cuantos puntos de anclaje para poder estimar antes de usar el conversor. A un ancho de 1000 px, 1 vw son 10 px, lo que hace trivial la aritmética: 2.5 vw son 25 px, 8 vw son 80 px. A 1440 px, 1 vw son 14.4 px. A 375 px, 1 vw son 3.75 px, así que un título de 8 vw son 30 px. Cuando convierta vw a px para una comprobación rápida, parta de uno de estos anclajes y escale.
Tres anchos, una hoja de estilos
Tomemos una tarjeta con un ancho de 80vw, un hueco de 4vw y un título de 6vw. En un teléfono de 375 px resultan 300 px, 15 px y 22.5 px. En una tableta de 768 px, 614 px, 30.7 px y 46 px. En un ordenador de sobremesa de 1440 px, 1152 px, 57.6 px y 86.4 px. Ver los tres lado a lado le dice de inmediato que la tarjeta es demasiado ancha en el ordenador de sobremesa y el título demasiado grande, y que probablemente quiere un ancho máximo y un clamp.
Más allá de la ventana de visualización
Unidades de contenedor
El CSS más reciente ofrece unidades relativas a un contenedor en lugar de a la ventana, como cqw, que es una centésima del ancho del contenedor. Resuelven el problema de que un componente colocado en una barra lateral estrecha se comporte como si tuviera toda la ventana. Si las usa, la aritmética es la misma que para vw, con el ancho del contenedor como base, y puede usar este conversor escribiendo ese ancho.
Ventanas de visualización pequeñas, grandes y dinámicas
En los teléfonos, el área visible cambia al desaparecer la barra de direcciones. Para las alturas, las unidades más recientes svh, lvh y dvh describen la ventana pequeña, grande y dinámica. Para los anchos la situación es más sencilla, ya que la barra de direcciones no los afecta, y vw es estable. Es una razón más por la que vw es una unidad más segura que vh para el diseño fluido en móviles.
Porcentaje, vw y la cuadrícula
Los anchos en porcentaje siguen al padre, vw sigue a la ventana, y la cuadrícula CSS y flexbox siguen el espacio disponible. A menudo los mejores diseños fluidos usan la cuadrícula y los porcentajes para la estructura y vw solo para la tipografía y los espacios, porque esas son las cosas que se benefician de seguir directamente la pantalla. Cuando convierta vw a px para comprobar un diseño, pregúntese si una pista de la cuadrícula habría dicho lo mismo con más solidez.
Explicar vw a quienes no escriben CSS
Use la ventana como regla
Los clientes y colegas suelen entender la idea cuando se les dice que un vw es el uno por ciento del ancho de la pantalla. Un título de 5 vw ocupa de ancho el cinco por ciento de la pantalla. Muéstreles después dos números: lo que resulta en su propio teléfono y en el gran monitor de la sala de reuniones. Cuando convierta vw a px para ambos anchos y diga los resultados en voz alta, la idea de un tamaño que se mueve con la pantalla se vuelve concreta.
Diga por qué el diseño no es fijo
Los interesados no técnicos a veces preguntan por qué la página no tiene simplemente un tamaño para el título. La respuesta es que las pantallas difieren en un factor de siete u ocho entre el teléfono más pequeño y el monitor más grande, y un tamaño fijo que conviene a una es erróneo para la otra. Las unidades fluidas son la respuesta, y las cifras en píxeles de esta página muestran cuánto cambia la pantalla el mismo valor.
De dónde vienen estas unidades
El píxel CSS
Cuando las pantallas dejaron de tener una densidad previsible, una página medida en píxeles reales se convirtió en una página que se encogía a medida que las pantallas se hacían más nítidas. Así que el píxel CSS se redefinió como una longitud de referencia: aproximadamente 1/96 de pulgada vista a una distancia de lectura cómoda. Es la unidad en la que esta página da sus respuestas.
Las unidades de la ventana de visualización
vw llegó con el diseño adaptable: una centésima del ancho de la ventana de visualización, sea cual sea. Se sitúa junto a rem, relativa al tamaño de fuente raíz, y em, relativa al elemento. Para ver cómo se ve el mismo valor en píxeles en esas unidades, convertir rem a px y compare.
Hábitos que mantienen comprensible el código fluido
Comente los valores en píxeles
Una línea como font-size: clamp(2rem, 1rem + 4vw, 6rem); /* 32px at 360, 96px at 1440 */ cuesta unas pocas palabras y ahorra al siguiente lector varias conversiones.
Mantenga el ancho de diseño en un solo lugar
Si su proyecto tiene una propiedad personalizada para el ancho al que se dibujó el diseño, todo valor vw puede rastrearse hasta ella. Cuando convierta vw a px para una revisión, sabe qué ancho usar.
Use vw con moderación
Una lista corta de valores vw es fácil de razonar. Una hoja de estilos donde todo está en vw, no. Resérvelo para la tipografía de exhibición, los grandes espacios y las ilustraciones.
Pruebe con dispositivos reales cuando importe
Las herramientas del navegador simulan bien los anchos, pero un teléfono real muestra el verdadero comportamiento de las barras de direcciones, la rotación y el zoom. Una comprobación de cinco minutos en un dispositivo detecta lo que una simulación pasa por alto.
Conversores relacionados
La misma familia de herramientas cubre las conversiones vecinas. Para volver a vw, use px a vw. Para los tamaños relativos a la raíz, están px a rem y rem a px, y para los tamaños relativos al elemento, px a em y em a px. Para los colores de la misma hoja de estilos, HEX a RGB y RGB a HEX se ocupan de las notaciones.
Un ejemplo resuelto
Digamos que un probador informa de que el título de la cabecera es difícil de leer en un teléfono pequeño. La hoja de estilos dice font-size: 5.2vw sin límites. Usted convierte vw a px a 360 y lee 18.7 px, a 768 lee 39.9 px, a 1440 lee 74.9 px. En el extremo estrecho el título es algo mayor que el texto del cuerpo y ya no se lee como un título. Sugiere clamp(2rem, 1rem + 4vw, 5rem), que da 32 px en lo más estrecho, unos 51 px a 768 y 5rem, 80 px, en lo más ancho. El probador confirma que ahora se lee bien, y el título sigue escalando.
Una breve lista de comprobación
Antes de convertir
Elija los anchos que le importan, a partir de las herramientas de desarrollo o de su lista de dispositivos objetivo.
Mientras convierte
Escriba el valor vw y cada ancho por turno, y anote los píxeles mostrados junto a la base.
Después de convertir
Mire los extremos. Si un tamaño es demasiado pequeño o demasiado grande en cualquiera de los dos extremos, añada límites con clamp().
Errores comunes
Suponer una única respuesta
Un valor vw tiene un tamaño en píxeles diferente a cada ancho. Dé el ancho con cada cifra.
Olvidar la barra de desplazamiento
100vw la incluye, así que una caja de ancho completo puede desbordarse.
Dimensionar el texto del cuerpo solo en vw
No se puede ampliar. Añada un término en rem y límites.
Sus números se quedan en su dispositivo
El cálculo se hace en local. Su navegador usa sus valores y no se envía nada a ninguna parte. No hay nada que borrar después ni ninguna cuenta que crear. Esa es la manera sencilla de convertir vw a px.
Resumen
Para convertir vw a px aquí, escriba el tamaño en vw y el ancho de la ventana, y lea al instante el resultado en píxeles, con la fórmula px = vw × ancho ÷ 100. El ancho empieza en 1440 px, un ancho en el que a menudo se dibujan los diseños, pero es un hábito y no un estándar, así que escriba el suyo. La conversión conserva la proporción de la pantalla: un vw es una centésima del ancho de la ventana de visualización, de modo que un tamaño en vw crece y se encoge con la ventana. A diferencia de rem, vw no tiene valor por defecto, ya que la ventana de visualización es tan ancha como la ventana del lector. Para el texto, combine vw con rem dentro de clamp(), para que siga siendo legible y ampliable. No se sube nada.