CSS - ¿Porcentajes o píxeles?

Question

He usado CSS durante muchos años, y siempre he sido un tipo de "porcentaje", ya que siempre defino alturas y anchuras usando porcentajes en oposición a los píxeles (excepto, por ejemplo, al configurar cosas como márgenes, relleno, etc., en cuyo caso uso píxeles).

me gustaría hacer algo como esto:

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

pero a menudo ver ejemplos como este:

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

Mi pregunta es la siguiente: ¿hay algún beneficio de usar una sobre la otra en general, y si es así, ¿qué son?

Gracias.

Mick

Answer 1

Páginas web móviles. % de rock para eso. Como se ajustará (obviamente) a su gusto.

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

Ambos tienen muchos más de y menos del uno sobre el otro :)

Answer 2

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

Answer 3

¡Razones en abundancia! Los anchos de porcentaje son muy útiles cuando se trata de dimensionar elementos relativos a otra cosa (tamaño del navegador, por ejemplo). Puede hacer que su página cambie dinámicamente para adaptarse a diferentes circunstancias. Los píxeles, por otro lado, son útiles cuando necesita tamaños de precisión que no le cambiarán. Algunas personas (por ejemplo, yo) usan píxeles y porcentajes para colocar los elementos como los desee. Otros (por ejemplo, personas que no sean yo: P) te dirán que esto es estúpido.

Answer 4

Uso píxeles en mi sitio web y mantengo un ancho máximo de 1000 px. Mi sitio web muestra correctamente en mi netbook 11" , sin embargo, no les va muy bien con los dispositivos móviles, pero eso es lo que este es para:

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

Encuentro desarrollo de sitios web en porcentajes muy consumen mucho tiempo, teniendo en cuenta todos los re -sizing eventos, tales como:

overflow:scroll; 

píxeles y porcentajes ambos tienen sus ventajas, pero podría decir que los píxeles sería una mejor opción debido a la precisión, fiabilidad, y es más fácil de desarrollar también otra cosa a tener en cuenta. son los píxeles y porcentajes de 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 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 5

% son el camino a seguir en un mundo moderno al igual que los gráficos vectoriales. A medida que las pantallas se vuelven más grandes o más pequeñas, puede escalar correctamente independientemente de la resolución.

Answer 6

Obviamente no es correcto o incorrecto. 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.

Escalar objetos es, por otro lado, 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 7

en propiedad top estilo interior está en % por lo que se cuenta 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í superior es de 30px. entonces 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 8

Uso Tanto = D

Con Siempre se puede combinar utilizando tanto si está confundido sobre él)

calc() es una manera CSS nativa de hacer simples matemática correcta en CSS como 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); 
} 

Compatibilidad con el navegador es sorprendentemente buena. Can I use...

Lectura recomendada: CSS-Tricks

Answer 9

me gusta porcentajes también, pero en algunos 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 siempre será notablemente más grande.