examples - css calc top

CSS-¿Porcentajes o píxeles?

Question

He estado usando CSS por muchos años y siempre he sido un tipo de ''porcentaje'', ya que siempre defino las alturas y los anchos usando porcentajes en lugar de píxeles (excepto, por ejemplo, al configurar cosas como márgenes Relleno, etc, en cuyo caso uso píxeles).

Haría algo como esto:

body{
    height: 99%;
    width: 99%;
    margin-top: 10px;
}

pero a menudo veo ejemplos como este:

body{
    height: 300px;
    width: 250px;
    margin-top: 10px;
}

Mi pregunta es la siguiente: ¿existen beneficios al usar uno sobre el otro en general , y si es así, cuáles son?

Answer 1

% es el camino a seguir en un mundo moderno como los gráficos vectoriales. A medida que las pantallas se hacen más grandes o más pequeñas, puede escalar adecuadamente sin importar la resolución.

Answer 2

Obviamente no hay bien o mal. Es más bien una cuestión de fluidez.

Es más fácil posicionar los objetos entre sí con píxeles y controlar la altura y el ancho exactos.

En cambio, escalar objetos es más fácil con porcentajes. El 50% del ancho de la ventana siempre será la mitad de la ventana sin importar el tamaño de la pantalla.

Answer 3

Páginas web móviles. Es la roca de% para eso. Como se ajustará (obviamente) a la medida.

Sin embargo, cuando desea un ancho fijo para, por ejemplo, un artículo de texto que desea mostrar de cierta manera, px''s es el ganador.

Ambos tienen muchos puntos positivos y negativos unos sobre otros :)

Answer 4

Razones en abundancia! Los porcentajes de ancho son muy útiles cuando se trata de dimensionar elementos en relación con otra cosa (por ejemplo, el tamaño del navegador). Puede hacer que su página cambie dinámicamente para adaptarse a diferentes circunstancias. Los píxeles, por otro lado, son útiles cuando necesitas tamaños de precisión que no cambien en ti. Algunas personas (p. Ej., Yo) usan píxeles y porcentajes para posicionar los elementos como los quieres. Otros (por ejemplo, personas distintas a mí: P) te dirán que esto es una estupidez.

Answer 5

Si desea que los objetos tengan el mismo tamaño, no importa qué, entonces píxeles (no afectados por el zoom o el tamaño de la pantalla). También puede considerar el uso de EM también. Creo que los EM están en el medio, donde se ven afectados por el zoom, pero no por el tamaño de la pantalla.

Answer 6

También me gustan los porcentajes, pero en ciertos casos no hace lo que espero. Si, por ejemplo, tengo dos botones que comparten la misma fila con ancho máximo: 50%, y la ventana gráfica actual no es un número par, uno de ellos será notablemente ligeramente más grande.

Answer 7

Uso píxeles en mi sitio web y mantengo un ancho máximo de 1000px. Mi sitio web se muestra correctamente en mi netbook de 11 ", sin embargo, no funciona muy bien con los dispositivos móviles, pero para eso está

<link rel="stylesheet" href="/styles/mobile.css" media="handheld" />

Me parece que el desarrollo de sitios web en porcentajes requiere mucho tiempo, teniendo que considerar todos los eventos de cambio de tamaño, como:

overflow:scroll;

Tanto los píxeles como los porcentajes tienen sus ventajas, pero yo diría que los píxeles serían una mejor opción debido a la precisión, la confiabilidad y que es más fácil de desarrollar. También otra cosa a considerar son los píxeles y porcentajes para las fuentes. Aquí está mi regla de oro:

• Si está desarrollando un sitio web con porcentajes, use porcentajes para la fuente, por las razones de mantener las proporciones correctas.
• Si está desarrollando un sitio web con píxeles, use píxeles para la fuente.

Si tiene personas que pueden necesitar ampliar la fuente, siempre es mejor usar porcentajes para la fuente.

Answer 8

la propiedad superior del estilo interno está en % por lo que contará como 200px*0.3=60px

#outer{
  border-style: dotted;
  position: relative; 
  height: 200px;
}
#inner{
 border-style: double;
  position: absolute;
  top: 30%; <<<<<<<<<<<<<<
}

<div id="outer">
outer
<div id="inner">
inner
</div>
</div>

Aquí la parte superior es de 30px. así será como es.

#outer{
  border-style: dotted;
  position: relative; 
  height: 200px;
}
#inner{
 border-style: double;
  position: absolute;
  top: 30px; <<<<<<<<<<<<
}

<div id="outer">
outer
<div id="inner">
inner
</div>
</div>

Answer 9

Usa ambos = D

Con Siempre puedes combinar usando ambos si estás confundido al respecto)

calc() es una forma nativa de CSS de hacer cálculos matemáticos simples en CSS como un reemplazo para cualquier valor de longitud (o casi cualquier valor numérico).

Tiene cuatro operadores matemáticos simples: add (+) , subtract (-) , multiply (*) y divide (/) .

.my-class {
    widht: calc(100% - 20px);
    height: calc(50% + 10px);
}

El soporte del navegador es sorprendentemente bueno. Puedo usar...

Lectura útil: CSS-Tricks