Convertir px a vw Pixels ↔ Viewport width Gratis En línea Seguro
Escriba un valor en px y léalo al instante en vw. 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 px a vw
| px | vw |
|---|---|
| 8 | 0.555556 |
| 10 | 0.694444 |
| 12 | 0.833333 |
| 14 | 0.972222 |
| 16 | 1.111111 |
| 18 | 1.25 |
| 20 | 1.388889 |
| 24 | 1.666667 |
| 32 | 2.222222 |
| 48 | 3.333333 |
| 64 | 4.444444 |
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 px a vw
Un diseñador envía una maqueta dibujada a 1440 px de ancho, con un encabezado de cabecera de 96 px y un hueco entre secciones de 72 px. En la web real la página se verá a 360 px en un teléfono, 820 px en una tableta y 2560 px en un monitor grande, y al diseñador le gustaría que el encabezado mantuviera su proporción respecto a la pantalla en cada uno de ellos. La unidad hecha para eso es el ancho de la ventana gráfica, vw, y el modo de llegar a ella desde la maqueta es convertir px a vw: se toma el valor en píxeles, se divide entre el ancho al que se dibujó el diseño y se multiplica por cien. Un encabezado de 96 px en un lienzo de 1440 px es 6.67 vw, y a partir de entonces es siempre el 6.67 por ciento de la pantalla que haya.
Esa es la promesa de la unidad de ventana gráfica, y también su riesgo. Rem y em parten de un tamaño de fuente, que el navegador fija en un valor por defecto razonable. Vw no tiene ningún valor por defecto: el ancho de la ventana gráfica es simplemente lo ancha que esté la ventana del lector, y cambia cuando gira el teléfono o arrastra la ventana. Por eso el conversor no oculta el único número del que depende la respuesta. El ancho del diseño está en un campo, que empieza en 1440 px, y puede cambiarlo para que coincida con su maqueta.
La aritmética se ejecuta en su navegador y no se sube nada. A continuación encontrará la fórmula, lo que la conversión conserva y lo que no puede conservar, dónde ayudan las unidades de ventana gráfica y dónde perjudican, el problema de accesibilidad que crea el texto en vw puro, la técnica de clamp que lo arregla y un método para convertir una maqueta en píxeles en una hoja de estilos fluida.
La fórmula y el ancho
vw es igual a px dividido entre el ancho, por cien
La fórmula es vw = px ÷ ancho × 100. Con un ancho de diseño de 1440 px, un tamaño de 144 px se convierte en 10 vw, 72 px en 5 vw y 24 px en 1.667 vw. La página muestra el ancho junto al resultado, como en 144 px = 10 vw (1440 px), para que pueda ver lo que se ha supuesto. Un vw es una centésima parte del ancho de la ventana gráfica, así que en una ventana de 1000 px de ancho 1 vw equivale a 10 px.
De dónde sale el 1440
Los 1440 px de aquí son un ancho al que a menudo se dibujan los diseños, una costumbre y no un estándar. Algunos equipos dibujan a 1280, muchos a 1920, y los diseños para móvil a 375 o 390. No hay una respuesta correcta, solo el ancho que use su archivo de diseño. Escriba el suyo: la conversión es tan buena como el ancho que le dé.
Usar el ancho propio del diseño
Si la maqueta se dibujó a 1920 px, escriba 1920, y el mismo encabezado de 96 px se convierte en 5 vw. Si convierte px a vw con el ancho equivocado, la página se verá bien en un tamaño de pantalla y mal en todos los demás, un error desconcertante cuando no se sabe dónde buscar.
Lo que la conversión conserva y lo que no puede
Conserva la fracción de la pantalla
Un vw es una centésima parte del ancho de la ventana gráfica, así que un tamaño escrito en vw crece y se reduce con la ventana en lugar de quedarse fijo. El resultado es la fracción de la pantalla que ocupaba el valor en píxeles en su maqueta, y en el navegador el elemento conserva esa fracción con cualquier ancho.
No puede dar un valor por defecto
A diferencia de rem, vw no tiene valor por defecto. Un navegador da a la 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 gráfica es simplemente lo ancha que esté la ventana del lector, y cambia cuando gira el teléfono. El ancho del campo es el ancho de su diseño, y la respuesta es correcta para una pantalla de ese ancho y proporcional en todas las demás.
Redondeo
Dividir entre 1440 produce decimales largos para la mayoría de los tamaños. Un valor como 6.6667 vw está bien en una hoja de estilos, pero puede redondear a 6.67 o 6.7 sin ningún cambio visible. Conserve dos o tres dígitos tras la coma; más es ruido.
Dónde ayudan las unidades de ventana gráfica
Encabezados de cabecera y tipografía de gran tamaño
Un encabezado que debe ocupar una fracción dada de la pantalla en todos los dispositivos es el uso clásico. Con el ancho de un teléfono, un encabezado fijo de 96 px se desbordaría; en vw se reduce con la pantalla y se queda en una línea.
Secciones a sangre
El espaciado entre las secciones grandes de una página de aterrizaje suele verse mejor cuando se escala con la pantalla, para que la página conserve su ritmo en un portátil pequeño y en una pantalla ancha. Los huecos en vw lo consiguen.
Ilustraciones que deben conservar su forma
Las imágenes de cabecera, las ilustraciones y las formas decorativas dimensionadas en vw conservan sus proporciones respecto a la ventana, así que la composición no se desmorona cuando cambia la pantalla.
Tipografía fluida con límites
Combinado con clamp(), vw da una tipografía que crece suavemente entre un mínimo y un máximo. Esta es la técnica que usan las hojas de estilo modernas para los encabezados, y se explica más abajo.
Dónde perjudican las unidades de ventana gráfica
Texto del cuerpo en vw puro
El texto dimensionado solo en vw no responde cuando el lector amplía la página en el navegador, porque el zoom cambia el tamaño en píxeles de la ventana pero un tamaño en vw conserva su fracción de ella. Quienes dependen del zoom, a menudo por mala vista, se quedan con un texto que no pueden agrandar. Las pautas de accesibilidad piden que el texto pueda redimensionarse, y un tamaño en vw puro no supera esa prueba.
Extremos diminutos y enormes
Con 320 px de ancho, un encabezado de 6.67 vw son 21 px, que pueden ser demasiado pequeños. Con 2560 px de ancho son 171 px, lo que es enorme. Sin límites, la proporción que parecía correcta a 1440 puede ser absurda en los extremos.
La barra de desplazamiento
En los navegadores de escritorio, el ancho de la ventana gráfica que se usa para vw incluye el ancho de la barra de desplazamiento vertical. Una caja fijada en 100vw será, por tanto, algo más ancha que el área visible cuando la página se desplaza, y puede aparecer una barra de desplazamiento horizontal. Sepa esto antes de construir un diseño de ancho completo con vw.
La técnica de clamp
Fijar un suelo y un techo
La función CSS clamp(mín, preferido, máx) toma un mínimo, un valor preferido y un máximo. Para la tipografía, escriba el mínimo y el máximo en rem, y el valor preferido en vw más un término en rem: font-size: clamp(2rem, 1rem + 4vw, 6rem). El tamaño crece con la ventana entre 32 y 96 px y nunca sobrepasa ninguno de los dos extremos. Como parte de él está en rem, el texto sigue respetando los ajustes del lector.
Cómo construir el término intermedio
Elija dos anchos de pantalla y los tamaños que quiere en cada uno. Por ejemplo, 32 px a 360 px de ancho y 96 px a 1440 px de ancho. La pendiente es (96 − 32) ÷ (1440 − 360) = 0.0593 px por px de ancho, que es 5.93 vw, y la ordenada en el origen es 32 − 0.0593 × 360 = 10.67 px, unos 0.667 rem. El término preferido es, por tanto, 0.667rem + 5.93vw. El conversor ayuda con la parte en vw, y un minuto de aritmética hace el resto.
Por qué este es el equilibrio adecuado
Con clamp obtiene el comportamiento fluido que quieren los diseñadores y la accesibilidad que necesitan los lectores. Es la respuesta al problema descrito arriba, y la razón por la que la mayoría de las hojas de estilo modernas usan vw solo dentro de clamp.
Cómo convertir px a vw aquí
Escriba el valor en píxeles
Introduzca el tamaño en píxeles en el primer campo. Se aceptan decimales.
Fije el ancho del diseño
Déjelo en 1440 si ese es el ancho de su maqueta. Cámbielo si no lo es. El resultado se actualiza a medida que escribe.
Copie el valor en vw
Use la cifra en su CSS con su unidad, como en font-size: 6.67vw. Para el texto, póngala dentro de clamp() junto con límites en rem.
De dónde vienen estas unidades
El píxel CSS
Cuando las pantallas dejaron de tener una densidad predecible, 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 cómoda de lectura. Es la unidad en la que se dibuja su maqueta.
Las unidades de ventana gráfica
El vw llegó con el diseño adaptable: una centésima parte del ancho de la ventana gráfica, sea cual sea. Está junto a rem, que es relativo al tamaño de fuente de la raíz, y em, que es relativo al elemento. Si necesita tamaños relativos al texto en lugar de a la pantalla, convierta px a rem.
Trampas al convertir px a vw
Usar el ancho de diseño equivocado
El error más común. Si su maqueta tiene 1920 de ancho y convierte con 1440, todos los tamaños se desvían en un tercio. Confirme el ancho del marco en su herramienta de diseño.
Olvidar el diseño móvil
Muchos equipos tienen dos maquetas, una para escritorio y otra para teléfono. Un encabezado que mide 96 px en la primera y 40 px en la segunda no es un único valor en vw. Use dos anchos, dos conversiones y un clamp para unirlos.
Poner toda la página en vw
Una página donde todo se escala con la ventana pierde su sentido de lectura: las líneas se hacen demasiado largas en pantallas anchas y el texto demasiado pequeño en las estrechas. Use vw para las pocas cosas que deben escalarse, y tamaños fijos o en rem para el resto.
Ignorar el problema del zoom
Pruebe su página con el navegador ampliado al 200 por ciento. Si el texto no crece, los tamaños necesitan un término en rem.
Preguntas que la gente se hace antes de convertir
¿Cuántos vw son 100 px?
Con un ancho de diseño de 1440 px, unos 6.94 vw.
¿Cuál es el mejor ancho de diseño que usar?
Aquel al que se dibujó su maqueta. No hay un valor por defecto universal.
¿Es vw mejor que rem?
Hacen trabajos distintos. Rem sigue el tamaño de texto del lector; vw sigue la ventana. Use cada uno para lo que sirve.
¿Puedo usar vw para el tamaño de fuente?
Sí, pero póngalo dentro de clamp() con límites en rem, para que el texto siga siendo legible y se pueda ampliar con el zoom.
¿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 vw a px, que multiplica por el ancho en lugar de dividir.
Elegir con acierto al convertir px a vw
Decida qué debe escalarse con la pantalla
Tipografía de cabecera, huecos grandes e ilustraciones: sí. Texto del cuerpo, bordes, controles pequeños: no. Cuanto más corta sea su lista de valores en vw, más robusta será la página.
Convierta en la fase de diseño
Si convierte px a vw mientras lee la maqueta, puede ver de inmediato qué valores salen raros y pedir al diseñador otros más limpios. Un encabezado que resulta ser 6.6667 vw invita a una conversación sobre dejarlo en 6.5 o en 7.
Lleve un registro del ancho
Escriba el ancho del diseño en un comentario al principio de la hoja de estilos, para que quien convierta más adelante use el mismo. Los anchos mezclados producen una página incoherente de un modo que nadie sabe explicar del todo.
De una maqueta a una hoja de estilos fluida
Haga una lista de los tamaños que deben escalarse
Abra el archivo de diseño y anote cada tamaño que quiera que siga a la pantalla: el título de cabecera, los huecos entre secciones, quizá una ilustración grande. Para cada uno, convierta px a vw respecto al ancho del marco y anote el resultado. La mayoría de las páginas acaban con menos de diez valores así, y todo lo demás se queda en rem o en píxeles.
Revise el marco móvil por separado
Si hay una maqueta para teléfono, lea los mismos elementos con su ancho. Un título de 96 px en un marco de 1440 px y de 40 px en un marco de 375 px no encaja con ningún valor único en vw, y esa es la señal para usar clamp: el tamaño del teléfono pasa a ser el suelo, el del escritorio el techo, y el término en vw hace el trabajo entre ambos. Cuando convierte px a vw para cada marco, los dos números definen la pendiente.
Revise con tres anchos
Mire la página terminada con aproximadamente 360, 820 y 1440 píxeles, y una vez con 2560. Los diseños fluidos son fáciles de acertar con el ancho de la maqueta y sutilmente erróneos en otros, y un breve repaso por estos anchos encuentra la mayoría de los problemas antes que un visitante.
Mantenga la unidad fuera del texto largo
Las líneas de texto de lectura se dimensionan mejor en rem y con una longitud máxima de línea de entre 60 y 75 caracteres. Use la unidad de ventana gráfica para la tipografía de cabecera y el espaciado, y deje que el texto de lectura sea estable.
Conversores relacionados
La misma familia de herramientas cubre las conversiones vecinas. Para volver a píxeles, use vw a px. 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 HEX a HSL se ocupan de las notaciones.
Un ejemplo resuelto
Digamos que una página de aterrizaje está diseñada a 1440 px, con un título de cabecera de 96 px y un hueco de 72 px encima. Escribe 96 y lee 6.667 vw, escribe 72 y lee 5 vw. En una ventana de 1000 px el título mide 66.7 px y el hueco 50 px, en proporción. Pero en un teléfono de 360 px de ancho el título sería de 24 px, que es menos de lo que quiere, así que escribe el título como clamp(2.25rem, 1rem + 5vw, 6rem), lo que da un suelo de 36 px y un techo de 96 px, y sigue siendo legible y ampliable. El hueco, que no tiene texto, se queda en vw simple.
Una breve lista de comprobación
Antes de convertir
Encuentre el ancho de la maqueta. Decida qué tamaños deben escalarse y cuáles no.
Mientras convierte
Escriba el valor en píxeles y el ancho del diseño, y copie la cifra en vw con su unidad.
Después de convertir
Redimensione la ventana desde el ancho de un teléfono hasta un monitor ancho, y amplíe la página al 200 por ciento. Añada límites con clamp() allí donde los extremos se vean mal.
Errores comunes
Suponer que 1440 es un estándar
Es solo una costumbre. Use su propio ancho.
Dimensionar el texto del cuerpo solo en vw
No se puede ampliar con el zoom. Añada un término en rem y límites.
Olvidar la barra de desplazamiento
100vw es más ancho que el área visible en las páginas de escritorio que se desplazan.
Sus números se quedan en su dispositivo
El cálculo se hace localmente. Sus valores los usa su propio navegador 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 px a vw.
Resumen
Para convertir px a vw aquí, escriba el tamaño en píxeles y el ancho de su diseño, y lea el resultado al instante, usando la fórmula vw = px ÷ ancho × 100. El ancho empieza en 1440 px, un ancho al que a menudo se dibujan los diseños, pero es una costumbre y no un estándar, así que escriba el suyo. La conversión conserva la fracción de la pantalla: un vw es una centésima parte del ancho de la ventana gráfica, así que un tamaño en vw crece y se reduce con la ventana. A diferencia de rem, vw no tiene valor por defecto, ya que la ventana gráfica es lo ancha que esté 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.