Pregunta Mezcla de porcentaje y CSS fijo


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

¿Debería alguna vez aplicar un porcentaje y un CSS fijo juntos? ¿Causará problemas, y si es así, de qué tipo?

  • ¿La mezcla degrada el rendimiento del rendimiento del navegador?
  • ¿La mezcla le dará resultados extraños en la carga inicial con navegadores de representación progresiva?

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 debes hacer lo que tengo en el siguiente ejemplo, así que estoy tratando de averiguar si usar CSS de esta manera es un problema.

Ejemplo de uso de 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>

35
2017-08-30 12:16


origen


Respuestas:


+1 Buena pregunta. Es posible que desee echar un vistazo a este artículo: "Diseño de ancho fijo, líquido y elástico"Va más allá del diseño de ancho fijo (em) y los diseños elásticos (%), y si hace clic para ir a la página siguiente se ve 'El híbrido elástico-líquido' - donde ancho: se establece de una manera, con ancho máximo: establecer el otro. Sé que el artículo vinculado a arriba no es exactamente lo que preguntaste, pero es un ejemplo de uso mixto dentro de un único estilo CSS.


Editar: Después de leer un poco más encontré algunas opiniones contradictorias sobre el tema. Encontré varios artículos que sostenían la idea de que "simplemente no puedes mezclar píxeles y porcentajes". Aunque, en su mayor parte, estos sitios estaban bastante anticuados. Cuando reduje la búsqueda a solo los artículos que se pusieron el año pasado, las cosas cambiaron un poco. Todavía había algunas opiniones en contra de mezclar, pero típicamente no explicó por qué, y parecía 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 anchos fijos es una práctica perfectamente aceptable, siempre que se haga con una comprensión de los resultados.

ver:

Divulgación completa: He sido un mezclador durante muchos años, sin De Verdad saber si mi enfoque fue 'correcto'.


33
2017-08-30 12:47



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 haga como en su ejemplo;

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

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

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

En este caso, si la ventana del navegador (o el padre de .container) es menos de 1000px, 25% en .container será menos de 250px y causará .cell sobrepasar .container.

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 causará .cell tener un ancho de 320px (100% + 10px + 10px) y desbordamiento .container.

Avísame si eso ayuda a aclarar las cosas.


5
2017-09-03 21:01



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

En su ejemplo, si su contenedor era de 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.


4
2017-08-30 13:44



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

Renderización eficiente de CSS

Escribir un CSS eficiente para usar en la interfaz de usuario de Mozilla

Optimizar la representación del navegador


2
2017-09-07 12:59



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 es 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. Lea aquí:

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

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


1
2017-08-30 12:37