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

¿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?

É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.

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.

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 .

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.

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. ..

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.

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).

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.

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.

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.

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.

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.

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.