ciento Mezcla y fija CSS

Question

Este es un duplicado de UI.StackExchange.com: porcentaje
https://ux.stackexchange.com/questions/1004/mixing-percent-and-fixed-css

Si alguna vez se aplique y CSS fijo juntos? ¿Causará problemas, y si es así, de qué tipo?

• ¿La mezcla degrada el rendimiento del rendimiento del navegador?
• ¿El mezclado le dará resultados extraños en la carga inicial con navegadores de renderizado progresivo?

A continuación se muestra un ejemplo simplificado de uso mixto, podría ser cualquier combinación. No estoy buscando la validación del ejemplo. He oído que nunca debe hacer lo que tengo en el ejemplo a continuación, por lo que estoy tratando de averiguar si el uso de CSS de esta manera es un problema.

Ejemplo de uso de la mezcla:

<style> 
.container 
{ 
    width:300px; 
} 
.cell 
{ 
    width:25%; 
} 
</style> 

<table class="container"> 
    <tr> 
     <td class="cell"><td> 
     <td class="cell"><td> 
     <td class="cell"><td> 
     <td class="cell"><td> 
    </tr> 
</table> 

Answer 1

+1 Buena pregunta. Es posible que desee echarle un vistazo a este artículo: "Fixed-width, liquid, and elastic layout" Repasa el diseño de ancho fijo (em) y los diseños elásticos (%), y si hace clic para ir a la página siguiente, verá el 'híbrido elástico-líquido' - donde ancho: se establece de una manera, con ancho máximo: establece el otro. Sé que el artículo vinculado a más arriba no es exactamente lo que pidió, pero es un ejemplo de uso mixto dentro de un único estilo CSS.

---

Editar: Después de leer un poco más encontré a un buen número de opiniones contradictorias sobre el tema. Encontré varios artículos que tenían la idea de que "you just can’t mix up pixels and percentages". Aunque, en su mayor parte, estos sitios fueron bastante anticuados. Cuando reduje la búsqueda a solo artículos que se pusieron en el año pasado, las cosas cambiaron un poco. Todavía había algunas opiniones en contra de la mezcla, pero generalmente no explicaban por qué, y parecían de la variedad "Siempre escuché que era una mala idea". La mayoría de la información más reciente que he encontrado sobre el tema parece indicar que el porcentaje de mezcla con anchuras fijas es una práctica perfectamente aceptable, , siempre que se haga teniendo en cuenta los resultados.

ver:

• "Fixed vs. Fluid vs. Elastic Layout: What’s The Right One For You?" (jun 2009)
• "For A Beautiful Web: Changing Man Layout" ...

Full Disclosure: 'correcta' He sido un mezclador durante muchos años, sin que realmente saber si mi enfoque era

Answer 2

no puedo encontrar ninguna evidencia documentada con casos de prueba para probar esto. ¿Podría indicarnos dónde ha leído sobre esto?

Encuentro que mezclar los dos bastante útil y también lo veo mucho en sitios de alto tráfico.

El único problema que afecta principalmente a navegadores antiguos e IE es el redondeo. Tiene una lectura aquí:

http://ejohn.org/blog/sub-pixel-problems-in-css/

http://agilewebmasters.com/robert/percentage-rounding-and-sub-pixel-perfection/

Answer 3

La forma en que la tiene está bien. Cada celda calcula 75px. Las únicas veces que debe tener cuidado con los porcentajes es cuando se aplica el redondeo.

En su ejemplo, si su contenedor era 303px, cada celda evaluaría a 75.66666px y redondearía hasta 76px, para un total de 304px que sería más grande que el contenedor. Ese píxel causa todo tipo de problemas.

Answer 4

Esto debería ayudar a aclarar cuándo está bien mezclar porcentajes y píxeles y cuándo no.

Mezclar el porcentaje y el ancho de píxeles no sería un problema cuando lo hace como en su ejemplo;

.container 
{ 
    width:300px; 
} 
.cell 
{ 
    width:25%; 
} 

Cuando se convierte en un problema es cuando invierte el orden;

.container 
{ 
    width:25%; 
} 
.cell 
{ 
    width:250px; 
} 

En este caso, si la ventana del navegador (o el padre de .container) es inferior a 1000 píxeles, 25% en .container será menor que 250 píxeles y causar .cell.container a desbordarse.

También se convierte en un problema cuando se mezclan porcentajes y píxeles en el caso de ancho más relleno;

.container 
{ 
    width:300px; 
} 
.cell 
{ 
    width:100%; 
    padding: 10px; 
} 

Esto hará que .cell a tener una anchura de 320 píxeles (100% + 10px + 10px), y el desbordamiento .container.

Avísame si eso ayuda a aclarar las cosas.

Answer 5

A partir de la investigación que he hecho, parece que el objetivo de su CSS (id, clase, universal ... etc.) es más importante en el rendimiento del renderizado del navegador.

Efficiently Rendering CSS

Writing Efficient CSS for use in the Mozilla UI

Optimize browser rendering