Calcular porcentaje CSS3

Question

Como puedo calcular el equivalente a un width en pixeles?

Osea si tengo:

width: 250px;

Como lo calculo en %? , para así hacer mi web apta para todas las resoluciones

Si lo que quieres es _hacer mi web apta para todas las resoluciones_, lo que debes crear es un diseño _responsive_, usando para ello media queries. Convertir de px a % sería un gran dolor de cabeza para lo que quieres hacer, ya que la conversión dependerá siempre del contexto. 250px en un contenedor de 1000px = 25% y en un contenedor de 500px = 50%. Los media queries identifican el tamaño de la pantalla por grupos de dispositivos y en base a eso aplican el tamaño a los elementos. — A. Cedano, Jul 13 '17 at 21:20

A. Cedano · Accepted Answer · 2017-08-09T16:20:56.030

Visto que el motivo de tu pregunta es el siguiente:

para así hacer mi web apta para todas las resoluciones

Me parece que estás emprendiendo el camino equivocado para lograr ese objetivo.

Primero, porque para hacer tu web apta para todas las resoluciones, lo que se usa son los Media Queries:

Añadidos en CSS3, los media queries dejan que la presentación del contenido se adapte a un rango específico de dispositivos de salida sin tener que cambiar el contenido en sí. Es lo que se llama en inglés un diseño responsive, o sea, que se adapta a cada dispositivo según el tamaño de la pantalla.

Segundo, porque tal conversión sería complicada, ya que dependerá siempre del contexto en el que se mostrarán los elementos.

No obstante, para responder a tu pregunta, la fórmula sería: elemento/contenedor:

Por ejemplo, para convertir un elemento de 250px en un contenedor de 1000px:

250/1000 = 0.25 (o sea, 25%)

Pero si el contenedor es de 500px:

250/500 = 0.5 (o sea, 50%)

Es decir, es una conversión que va a depender siempre del contexto. Dicho de otro modo, la conversión de un elemento de 250px equivaldría a 25% en un contexto, 50% en otro contexto, n% en n contextos.

Para más detalles puedes consultar:

ArcanisGK507 · Answer 2 · 2017-07-13T21:45:03.447

este método es el recomendado, con calc puedes hacer cálculos:

:root {
  --width-size1: 250px;
}

.one {
  width: calc(var(--width-size1) - 80%);
}

lo que si te aseguro es que hacer una web apta para todo los navegadores se le dice diseño responsive, y para tal caso te recomiendo un patrón de diseño tipo bootstrap o una plantilla basada en esa tecnología, ya que te acortara mucho el diseño...seria interesante que lo tomes en consideración.

Shaz · Answer 3 · 2017-07-13T21:01:51.913

El tipo de datos "porcentaje" en css básicamente toma como 100% la longitud de su contenedor o elemento padre.

En ese de orden de ideas, un ancho de 250px será equivalente a 25% si su contenedor es de 1000px, o será 50% si el contenedor es de 500px de ancho.

Tal vez una unidad de medida que te puede servir más para adaptar tu ancho a todas las resoluciones, es vw, que son las iniciales de viewport width o el ancho de la zona visible.

1vw es igual al 1% de "la ventana", lo cual puede hacerlo más fácil de adaptar en muchos casos.

Por último puedes revisar calc(), el cuál hace operaciones aritméticas básicas para dar una longitud.

Ejemplo: calc(50% + 200px)

Falta otro -1 y me gano la medalla de "presión de pares". – Shaz Jul 13 '17 at 21:24 — Shaz, Jul 13 '17 at 21:24

score 0 · Answer 4 · edited Jul 13 '17 at 22:13

calc(), una función de CSS3 con la que podemos realizar cálculos con medidas, es decir: sumas, restas, multiplicaciones y divisiones mezclando porcentajes, píxeles o cualquier unidad. Además, es compatible con todos los navegadores.

/* Forma estándar de calc() */
width: calc([Cálculos]);
/* Forma según navegadores de calc() */
width: -webkit-calc([Cálculos]);
width: -moz-calc([Cálculos]);

Ver Aqui

Calcular porcentaje CSS3

4 Answers4