¿Es malo trabajar con píxeles en CSS? [cerrado]

83

¿Es malo en términos de compatibilidad usar números de píxeles en CSS en lugar de porcentajes? ¿Qué tal resoluciones más bajas? ¿Está bien trabajar con ellos en rangos de 1 a 100?

loya
fuente

Respuestas:

40

Ésta es una pregunta difícil, porque la respuesta depende principalmente de su situación.

Los píxeles no son tan malos, yo también los uso principalmente. (A veces, incluso para tamaños de fuente). Por
lo general, fijo el elemento de bloque exterior del diseño en un tamaño determinado (píxeles con diseños de ancho fijo y porcentajes con diseños fluidos), y en los elementos internos, generalmente establezco porcentajes siempre que sea posible.

Hay algunos elementos que simplemente no se pueden diseñar con porcentajes o ems, especialmente las cosas más sofisticadas que provienen de diseñadores gráficos que no entienden tales principios.

Por ejemplo: si tiene una columna en su sitio con un estilo simple, puede establecer su ancho en un porcentaje fácilmente, pero si tiene una imagen de fondo con un ancho específico que no está diseñado teniendo en cuenta la escala, solo se ve bien con un ancho fijo. En tales casos, deberá asegurarse de que el resto de la página ocupe el ancho restante correctamente.

Tenga en cuenta que puede usar píxeles con porcentajes juntos.
Por ejemplo, este es un fragmento de una de mis últimas aplicaciones web:

min-width: 800px;
width: 80%;
max-width: 1500px;

La elección también depende del diseño o disposición que le gustaría lograr.

Para un diseño de ancho fijo , los valores de píxeles están bien. Si un diseñador te da una imagen de Photoshop que contiene cosas realmente elegantes y que sería extremadamente complicado pensar en cómo cambiaría el tamaño, definitivamente deberías optar por esto.

Si su diseño necesita ser dinámico , debe usar porcentajes para asegurarse de que se expanda a medida que cambia la resolución, y puede usar el fragmento de código anterior para que se vea mejor en escenarios donde de otra manera se vería loco.

Algunos diseños (por ejemplo, imagina si StackOverflow ocuparía todo el espacio) se verían bastante feos en un ancho de por ejemplo. 1920 píxeles: los anchos de línea serían tan increíblemente altos que sería extremadamente poco conveniente de leer.
Para eso max-widthes. Incluso en algunos diseños dinámicos, tendrá que limitar el ancho máximo de su sitio para maximizar la usabilidad y la legibilidad.

Y también tenga en cuenta las pantallas más pequeñas.
Es cierto que ya nadie usa un escritorio de 800 × 600, pero muchas personas navegan por la web con dispositivos móviles que tienen una resolución aún menor.
Para esto es min-width: hacer que su diseño expandido dinámicamente se vea menos abarrotado en resoluciones más pequeñas.

Espero que esto ayude.

EDITAR:

The Smashing Book tiene algunos pensamientos muy agradables sobre el tema.

EDITAR 2:

No quiero que mi publicación parezca que quiero que fuerces el tamaño basado en píxeles en tus visitantes.
(Aparentemente, algunas personas en los comentarios me malinterpretaron de esa manera).

Para aclararlo:

Creo que el diseño ideal es aquel que se ajusta bien a cualquier posible resolución o configuración.
Sin embargo, no siempre podemos hacer todo perfectamente. El tiempo / recursos y el público objetivo son la clave para determinar si su sitio requiere esa funcionalidad avanzada o no.

Le sugiero que use lo correcto para el trabajo dado.

Si está desarrollando un sitio que tendrá un porcentaje significativo de visitantes que requieren ajustes más avanzados en el sitio, puede valer la pena.
(Por supuesto, a veces lo hacemos por nosotros mismos para tener la sensación de hacer las cosas de la manera correcta, pero no siempre es una decisión financieramente sólida).

Aún así, debe hacer la investigación adecuada sobre qué tipo de sitio será, quiénes serán los visitantes y esas cosas, antes de decidir sobre los diseños, y si vale la pena el tiempo para hacerlos fluidos o más dinámicos.

Venemo
fuente
5
Dimensionamiento de cosas por mangueras de píxeles para muchos usuarios. La mayoría de las personas tienen anchos de pantalla de 1024 o más, pero ¿qué tan ancha es la ventana de su navegador? ¿Qué pasa si está abierta junto con otras cuatro ventanas y solo quieren que tenga 400 px de ancho? Alternativamente, ¿qué pasa si su visión no es tan buena y usan fuentes de 24 o 32 puntos en un monitor de 30 "? Entonces, su ancho máximo las restringe en exceso.
Alex Feinman
"Los anchos de línea serían tan increíblemente altos que sería extremadamente poco conveniente leerlos"; esto se puede solucionar usando un tamaño relativo, como ems, que es una solución mucho mejor que imponer un tamaño de píxel al usuario.
rmeador
4
@Alex, @rmeador: se trata de cuál es la audiencia objetivo del sitio y cuánto tiempo quieres dedicarle. Por supuesto, un diseño ideal es aquel que se ajusta correctamente a cada configuración y resolución posibles, pero si el 99% de sus usuarios no lo requiere, entonces es una pérdida de esfuerzo y dinero. No estoy sugiriendo que lo que dices esté mal, pero no siempre vale la pena el esfuerzo.
Venemo
Veo que los tamaños de fuente por ems ya están disponibles y los px están dentro. Hurra.
James Westgate
1
@Alex Feinman: las personas con un ancho de ventana del navegador de 400 px pueden simplemente expandirlo a la pantalla completa. Y casi todos harán esto, si ven un desplazamiento horizontal. Por cierto, stackoverflow tiene un ancho fijo de 960px. Muchas páginas de Google también tienen un ancho fijo.
Davinel
38

Todas las medidas tienen sus propios fines:

  • Utilice píxeles para elementos basados ​​en píxeles , como bordes. Probablemente no desee un borde que tenga un ancho de 1.3422 píxeles.

  • Utilice medidas centradas en el texto (em, ex) para elementos basados ​​en texto , como áreas de contenido, etiquetas y cuadros de entrada. Es una manera fácil de asegurarse de que tiene espacio para texto de cierta longitud y ancho.

  • Utilice porcentajes para elementos basados ​​en ventanas , como columnas.

Hay excepciones, por supuesto. Por ejemplo, es posible que desee especificar un ancho de columna mínimo en píxeles. Pero siga lo anterior y sus páginas escalarán bien. SIEMPRE acerque y aleje sus páginas para ver cómo funcionan con diferentes tamaños de fuente y formas de navegador; no se sorprenda más tarde.

Alex Feinman
fuente
1
Esta es la respuesta correcta. Si diseña teniendo en cuenta la escalabilidad desde el principio, su vida será más fácil en el futuro. Ciertamente, los anchos de líquido no deben considerarse una funcionalidad avanzada o que consumen mucho tiempo, como sugiere Venemo. Sin mencionar el tamaño de las fuentes en px (nunca hagas esto, nunca).
Bryan Downing
@Bryan: los diseñadores no diseñan algunos diseños teniendo en cuenta la escalabilidad. P.ej. Si recibe un archivo psd de un diseñador que no está diseñado para escalar, ¿por qué lo haría escalable?
Venemo
2
@Venemo, eso es un desafío. Si los diseños de un artista gráfico están "arrojados por la borda", tal vez debería volver a examinar su flujo de trabajo para que pueda colaborar mejor en el aspecto del sitio. También puede rellenar el diseño de forma creativa. Los bordes de imagen en HTML5 también parecen compensar muchos problemas como este, al permitir que los bordes gráficos de ancho variable conecten elementos gráficos de tamaño fijo.
Alex Feinman
@Alex, +1, estoy de acuerdo. Aún así, algunos clientes no lo requieren o ni siquiera les importa. En tales casos, es una pérdida de tiempo y dinero. También estuve de acuerdo en HTML5. Desafortunadamente, no recomiendo usarlo demasiado si le preocupan los navegadores heredados o IE.
Venemo
@Venemo - Punto justo. Acabo de ver este DVD que tiene muchos puntos positivos sobre el diseño de diseños escalables accesibles (y cómo convencer a los clientes de que deben usarlos).
Bryan Downing
12

Tamaños de fuente

Creo que primero debe comprender los problemas que existen al trabajar con píxeles en CSS:

  • El zoom en los navegadores más antiguos no funciona. Por ejemplo, IE6 e IE7 no cambian el tamaño del texto al hacer zoom . La altura de la línea también puede ser peculiar. Estos problemas no existen en los navegadores modernos, pero son una razón por la que muchos evitan usar píxeles para los tamaños de fuente.
  • Todos verán el texto del mismo tamaño si especifica el tamaño de fuente en píxeles. Los navegadores tienen un tamaño predeterminado de 16px para los párrafos, por lo que si solo usa emy otros tamaños relativos, respetará la decisión de los usuarios que cambien esto. Esto es especialmente importante en sitios con mucho texto, especialmente si hay más usuarios mayores. Por otro lado, si el diseño de un sitio es importante, creo que es posible y justificable usarlo pxpara especificar tamaños de fuente sin romper la usabilidad.

Al final, debes tomar la decisión tú mismo, y depende de las circunstancias exactas, pero creo que especificar tamaños de fuente en píxeles está bien .

Por cierto, cuando se trabaja con empara especificar el tamaño de fuente, es una buena idea establecer el bodya font-size: 62.5%. Esto significa que el tamaño de fuente base es 10px, por lo que 1em es 10px, 1.6em es 16px y así sucesivamente, lo que facilita pensar en píxeles mientras se diseña con ems . Todavía me resulta frustrante trabajar así, especialmente cuando los valores de ems caen en cascada. Hay algunos sitios muy útiles como PXtoEM.com que ayudan con esto.

Problemas de diseño

La pantalla tiene un diseño basado en píxeles , por lo que los píxeles son una opción intuitiva para muchas cosas. El problema principal aquí es que diferentes usuarios tienen diferentes tamaños de pantalla . Como han señalado otros, el uso de min-widthy max-widthen píxeles junto con widthen porcentaje es una forma útil de respetar el tamaño de la pantalla, al tiempo que evita que su sitio se aplaste o estire injustificadamente en ventanas muy pequeñas y muy grandes.

Sin embargo, generalmente evitaría este enfoque en favor de las consultas de medios CSS . A continuación, puede utilizar trozos de ancho fijo y ampliar el diseño (entre otras cosas) a medida que aumenta el tamaño de la pantalla. Sin embargo, las consultas de medios CSS, como todas las tecnologías web geniales, adolecen de falta de compatibilidad con el navegador. En particular, IE8 y versiones anteriores no los admiten, aunque hay correcciones de JavaScript. Por otro lado, el iPhone y otros dispositivos portátiles los admiten, y los recomendaría encarecidamente si desea que su sitio se vea bien en estos dispositivos.

Creo que las cuadrículas de ancho fijo están bien . Los sistemas de cuadrícula de ancho fijo como el sistema de cuadrícula 960 son lo suficientemente populares por derecho propio, y hay tantos otros sitios que tienen un ancho fijo, que dudo que escuche muchas quejas si hiciera esto. Los dispositivos portátiles que no tienen pantallas grandes son un problema, pero aquí es donde deben usarse las consultas de medios CSS, por lo que es posible especificar todo en píxeles y hacer que su sitio se vea hermoso en el escritorio y en el iPhone.

Conclusión

En última instancia, todo depende de quiénes son sus usuarios, qué necesita soporte y cómo desea que se vea su sitio, pero no hay nada intrínsecamente malo en usar píxeles en CSS .

David Johnstone
fuente
2
Solo para señalarlo, los 'píxeles' de CSS NO son píxeles de visualización
Romeno
4

Eso depende de lo que estés diseñando. Para las columnas, por ejemplo, el ancho probablemente debería depender del tamaño del texto para garantizar que se vea óptimo en múltiples resoluciones / pantallas. Si desea dividir su página en dos partes, debe usar porcentajes. Pero si desea un borde de 1 px entre estas dos partes, independientemente de la resolución, use píxeles.

Ruud
fuente
4

Básicamente depende de quién te contrata y, en consecuencia, de la audiencia de tu trabajo. Para propósitos institucionales (donde el contenido debe prevalecer sobre la forma, como un proyecto de gobierno), es mejor trabajar con .em o%, son más difíciles de controlar, pero serán realmente fáciles de usar en términos de accesibilidad.

Si hablamos de sitios web corporativos (donde la forma es el trato), el píxel será una herramienta más precisa para cumplir con las expectativas de su cliente con respecto a su marca. Una interfaz líquida (%, .em) siempre es buena cuando se hace de manera inteligente, pero no olvide verificar su diseño en condiciones extremas y asegúrese de que sea estable.

Si trabaja con píxeles, tendrá un control absoluto sobre el aspecto final de su sitio, pero tendrá que asumir la imposibilidad de que algunos usuarios operen con él de manera eficiente.

La mejor opción: en lugar de diseñar un sitio web compatible para todas las plataformas (lo que resultará en un diseño de múltiples deficiencias) sugiera a sus clientes versiones especiales del sitio adaptadas a cada demanda, lo que es una mejor práctica y un mejor negocio para un diseñador también. ..

Moustard
fuente
1
+1 por mencionar que depende de su cliente y del público objetivo del sitio.
Venemo
2

Yo diría que lo evite si es posible excepto en ciertos casos.

Por ejemplo, para un borde delgado, está bien especificar 1px.

También para max-ymin- atributos de estilo está bien. Pero luego haga que el atributo non-max / min sea un porcentaje si es posible.

Earlz
fuente
1
+1 por mención max-y min-propiedades.
Venemo
2

Esta es realmente una buena pregunta que ya me he hecho muchas veces. Al no ser un diseñador web incondicional (estoy más en el lado del desarrollo), generalmente les pregunto a los diseñadores con los que trabajo sobre sus opiniones, y esto es lo que he resumido:

Usar porcentajes vs píxeles para dimensionar elementos, etc., es realmente una cuestión de gusto personal o de los requisitos de cada caso específico. Si necesita escalar, o escalará bien, use porcentajes. Si no es así, utilice píxeles. La gente aquí ha utilizado los ejemplos de columnas principales en una página que tal vez necesiten ser fluidas, pero los bordes pueden necesitar la precisión de una medición de píxeles.

Obviamente, el tamaño de las imágenes está bastante ligado a su resolución y unidades de píxeles, por lo que siempre las uso en este caso.

Sin embargo, usar el tamaño de em en lugar de píxeles o incluso el tamaño de puntos para el texto es una olla de pescado completamente diferente. La mayoría de los chicos con los que trabajo tienen un estilo de reinicio básico para tamaños de fuente que reduce el tamaño de 1em a aproximadamente 12px. Luego usan ems en cualquier otro lugar (o tan cerca de cualquier otro lugar como sea posible) para dimensionar elementos de texto, controles de formulario y similares. Así es como opero ahora también, ya que parece funcionar bien en una variedad de navegadores, sistemas operativos y DPI en computadoras de escritorio y portátiles. Sin embargo, no puedo responder por los dispositivos móviles.

Sin embargo, la accesibilidad es la clave: si necesita hacer algo utilizable para personas con discapacidades o trabajar en una variedad de dispositivos listos para usar, incluso cosas que pueda considerar antiguas, entonces la escala será un requisito. Introdúzcalo en su modelo para diseñar el sitio desde el principio y puede darse cuenta de que el tamaño absoluto de píxeles ni siquiera es necesario en ese caso.

Por ejemplo, un diseño con mucho arte probablemente se diseñará a una sola escala, pero el nuevo sitio web educativo para usuarios discapacitados tendrá que funcionar en una variedad de situaciones.

Solo recuerde, el W3C incluyó una variedad de métodos para dimensionar y escalar en sus especificaciones por una razón: flexibilidad. Haga lo que mejor se adapte y funcione bien para su audiencia (como Moustard dijo anteriormente).

Geoff Adams
fuente
1

No soy un experto en css / html, pero la convención que utilizo es usar píxeles para los contenedores externos y porcentajes para los objetos internos.

Otra regla general que tengo con cualquiera que revise mi diseño es una regla de tres píxeles . Es raro que todo se alinee exactamente en todos los navegadores que existen. Estamos de acuerdo en que el esfuerzo supera los beneficios de mover cualquier cosa de tres píxeles o menos.

Stevko
fuente
+1 para "píxeles para los contenedores externos y porcentajes para los objetos internos". Aún así, esto se aplica solo a diseños de ancho fijo.
Venemo
1

Haz lo correcto por defecto. Si un usuario visita su sitio con javascript desactivado y sin cookies de preferencia, debe proporcionarle una página web que sea lo más funcional y accesible posible.

Tu defecto hoja de estilo debe asumir nada acerca de la ventana del navegador y aún representar una página funcional, por horrible que sea, con una resolución de hasta 320x320 y hasta tamaños ilimitados. Si la fidelidad fotográfica es tan importante que no puede confiar en la escala del navegador, y a veces lo es, entonces debe usar medidas de píxeles (al menos mínimas) para elementos que encapsulan imágenes de tamaño fijo, para asegurarse de que no termine con cosas importantes que se ocultan. La especificación de anchos mínimos junto con porcentajes debería brindarle el control que necesita al tiempo que brinda a sus usuarios la accesibilidad que necesitan. Incluso si la accesibilidad no es un problema ahora, lo será más tarde si el sitio tiene éxito.

Cuando haces saber más sobre la ventana del navegador, entonces es apropiado el uso de hojas de estilo en anchos fijos alternativos, si la importancia de preservar los justifica el trabajo de diseño añadido.

Chris
fuente
0

Si está apuntando a un tamaño fijo, los píxeles están bien. Pero si desea que su diseño se vea bien en varias resoluciones / tamaños de pantalla, debe ceñirse a medidas más relativas, como porcentajes. La mayoría de la gente apunta a este último.

Daniel DiPaolo
fuente
0

Está bien si eso es lo que se necesita para complacer a su cliente. La mayoría de las veces, no se puede equilibrar la cantidad de espacio en distintos tamaños de pantalla con solo porcentajes. Las consultas de medios CSS3 ayudan aquí, pero la adopción sigue siendo problemática.

artificialidiot
fuente
0

Prefiero los píxeles en la mayoría de los casos. Por ejemplo, el ancho predeterminado del contenido es: 960px. En "1024" estará bien, con pequeños espacios libres a ambos lados de la pantalla. Ponga un degradado o un fondo allí. En "1280" o "1440" o "1680", o lo que sea, habrá una brecha cada vez mayor, pero se verá bien. Sí, por 800, este sitio será feo. ¿Pero a quién le importa? Todos los jugadores importantes abandonaron el soporte para 800. Hay muy pocas personas con esta resolución ...

Hay muchos sitios diferentes, sin embargo, %% será una solución mucho mejor.

Davinel
fuente
En mi opinión, la compatibilidad con 800px y anchos inferiores debería volver debido a la aparición de dispositivos móviles. Sin embargo, no todo el mundo querría hacer el esfuerzo de hacer que sus sitios se vean bien con móviles.
Venemo
@Venemo: creo que crear una versión móvil del sitio será una mejor solución.
Davinel
Tengo una pantalla de 1680px de ancho, pero a menudo tengo varias ventanas una al lado de la otra, lo que da unos 800px de ancho. No me sorprendería que múltiples ventanas abiertas sean más comunes que no para los usuarios con conocimientos técnicos. ¿Es esto molesto para algunos sitios? Sí, pero también es más útil que las alternativas que he probado. El espacio vertical parece mucho más esencial para casi todo.
-1

Los componentes básicos de una pantalla son los píxeles. No puedes equivocarte con tamaños de píxeles fijos. Como han mencionado otros carteles, también puede utilizar porcentajes o "em" para un sustituto escalable.

sitesbyjoe
fuente
2
-1. Los componentes básicos de una página web son el texto y los gráficos. Sí, eventualmente se traducen a píxeles, pero es algo irrelevante.
Alex Feinman
@Alex: no habló de los componentes básicos de una página web, sino de los componentes básicos de una pantalla.
Venemo
@Alex ¿es irrelevante? Vuelve a leer la pregunta. "¿Es malo en términos de compatibilidad usar números de píxeles en CSS en lugar de porcentajes? ¿Qué tal resoluciones más bajas? ¿Está bien trabajar con ellos en rangos de 1 a 100?"
sitesbyjoe