css - column - style width html

¿Es malo trabajar con píxeles en CSS? (13)

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

Tamaños de fuente

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

Acercar navegadores más viejos está roto. 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 tamaños de fuente.
Todos verán texto del mismo tamaño si especifica el tamaño de fuente en píxeles. Los navegadores tienen un tamaño predeterminado de 16 píxeles para los párrafos, por lo que si solo usa em y otros tamaños relativos, respetará la decisión de los usuarios que cambien esto. Esto es especialmente importante en sitios de texto pesado, 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 usar px para especificar los tamaños de fuente sin romper la usabilidad.

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

Por cierto, cuando se trabaja con em para especificar el tamaño de fuente, es una buena idea configurar el body en 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, por lo que es más fácil pensar en píxeles al diseñar con ems . Todavía me resulta frustrante trabajar así, especialmente cuando los valores de ems en cascada. Hay algunos sitios muy útiles como PXtoEM.com que ayudan con esto.

Problemas de diseño

La pantalla es 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, utilizar min-width y max-width en píxeles junto con el width en porcentaje es una forma útil de respetar el tamaño de la pantalla, al tiempo que evita que su sitio quede excesivamente aplastado o estirado en ventanas muy pequeñas y muy grandes. .

Sin embargo, generalmente evitaría este enfoque a favor de las consultas de medios de CSS . A continuación, puede usar 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 de CSS, como todas las tecnologías web geniales, adolecen de la falta de soporte del navegador. En particular, IE8 y versiones anteriores no los admiten, aunque existen correcciones de JavaScript. Por otro lado, el iPhone y otros dispositivos portátiles sí 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 960 Grid System son lo suficientemente populares por derecho propio, y hay tantos otros sitios que tienen un ancho fijo, que dudo que oigas muchas quejas si lo hicieras. Los dispositivos de mano que no tienen pantallas grandes son un problema, pero aquí es donde deberían usarse las consultas de medios CSS, por lo que es posible especificar todo en píxeles y que su sitio se vea hermoso en el escritorio y en el iPhone.

Conclusión

En última instancia, todo depende de quiénes sean sus usuarios, qué necesite para respaldar y cómo quiere que sea su sitio, pero no hay nada intrínsecamente incorrecto con el uso de píxeles en CSS .

Básicamente depende de quién te está contratando y, en consecuencia, de la audiencia de tu trabajo. Para fines institucionales (donde el contenido debe prevalecer sobre la forma, como un proyecto gubernamental), 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 la oferta), el píxel será una herramienta más precisa para satisfacer las expectativas de los clientes con respecto a su marca. Una interfaz líquida (%, .em) siempre es una buena opción cuando se hace de manera inteligente, pero no se olvide de verificar su diseño en condiciones extremas y asegúrese de que sea estable.

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

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

Eso depende de lo que estés estilizando. Para las columnas, por ejemplo, el ancho probablemente dependa 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 quiere un borde de 1px entre estas dos partes, independientemente de la resolución, use píxeles.

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

Esta es realmente una buena pregunta que he preguntado muchas veces antes. Al no ser un diseñador web duro (estoy más en el lado del desarrollo) generalmente les he preguntado a los diseñadores con los que trabajo sobre sus opiniones, y aquí está lo que he destilado:

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

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

Sin embargo, el uso de tamaño de em frente a pixel o incluso el tamaño de punto para el texto es una olla de pescado completamente diferente. La mayoría de los chicos con los que trabajo tienen un estilo de restablecimiento de base para tamaños de fuente que reduce el tamaño de 1em a aproximadamente 12 píxeles. Luego usan ems en cualquier otro lugar (o tan cerca de cualquier otro lugar como sea posible) para clasificar elementos de texto, controles de formularios y similares. Esta es la forma en que 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. Aunque no puedo responder por los dispositivos móviles.

Sin embargo, la clave es la accesibilidad: si necesita hacer algo utilizable para personas con discapacidades o trabajar en una variedad de dispositivos, incluso cosas que puede considerar antiguas, entonces el escalado será un requisito. Constrúyalo 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á en una sola escala, pero el nuevo sitio web educativo para usuarios discapacitados tendrá que trabajar en una variedad de situaciones.

Solo recuerde, el W3C puso una variedad de métodos para dimensionar y escalar en sus especificaciones por una razón: flexibilidad. Haz lo que mejor se adapte y funcione bien para tu público (como dijo Moustard antes).

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

Los píxeles no son tan malos, también los uso. (A veces incluso para tamaños de fuente)
Por lo general, corrijo 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 interiores generalmente establezco porcentajes siempre que sea posible.

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

Por ejemplo, si tiene una columna en su sitio con un estilo simple, puede establecer fácilmente su ancho en un porcentaje, 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 ocupa 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 diseño que le gustaría lograr.

Para un diseño de ancho fijo , los valores de píxel están bien. Si un diseñador te ofrece una imagen de Photoshop que contiene cosas realmente extravagantes, lo que sería extremadamente complicado incluso pensar en cómo se redimensionaría, definitivamente deberías ir por esto.

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

Algunos diseños (por ejemplo, imaginar si 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 leerlos.
Esto es para qué es el max-width . Incluso en algunos diseños dinámicos, tendrá que limitar el ancho máximo de su sitio para maximizar la facilidad de uso y la legibilidad.

Y también tenga en cuenta las pantallas más pequeñas.
Es cierto que nadie usa una computadora de escritorio de 800 × 600, pero muchas personas navegan por la web con dispositivos móviles que tienen una resolución aún menor.
Esto es lo que es el min-width : para hacer que su distribución expandida dinámicamente parezca menos atestada en resoultions más pequeños.

Espero que esto ayude.

EDITAR:

The Smashing Book tiene algunos buenos pensamientos sobre el tema.

EDICION 2:

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

Para aclararlo:

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

Estoy sugiriendo 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 bien, 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én será el visitante y ese tipo de cosas, antes de decidir acerca de los diseños, y si vale la pena el tiempo para hacerlos más fluidos o más dinámicos.

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

Su hoja de estilo predeterminada no debe asumir nada sobre la ventana del navegador, y aún así mostrar una página funcional, por horrible que sea, hasta una resolución de 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 mediciones de píxeles (al menos mínimos) para elementos que encapsulan imágenes de tamaño fijo, para asegurarse de que no termina con cosas importantes que se cubren. Especificar anchuras mínimas junto con porcentajes debería darle el control que necesita mientras brinda a los usuarios la accesibilidad que necesitan. Incluso si la accesibilidad no es un problema ahora, será más tarde si el sitio tiene éxito.

Cuando sepa más sobre la ventana del navegador, está bien utilizar anchuras fijas en hojas de estilo alternativas, si la importancia de preservar el diseño justifica el trabajo adicional.

Los bloques de construcción de una pantalla son píxeles. No puedes equivocarte con los tamaños de píxeles fijos. Como otros carteles han mencionado, también puede usar porcentajes o "em" s para un sustituto escalable.

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

Otra regla de oro que tengo con cualquiera que revise mi diseño es una regla de tres píxeles . Es raro que todo se alinee exactamente dentro de cada navegador que hay. Hemos acordado que el esfuerzo supera los beneficios de mover cualquier cosa de tres píxeles o menos.

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

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

Si se orienta 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, entonces debe apegarse a medidas más relativas como porcentajes. La mayoría de las personas se dirigen a este último.

Todas las medidas tienen sus propios fines:

Use píxeles para elementos basados en píxeles , como bordes. Probablemente no desee un borde que termine siendo 1.3422 píxeles de ancho.
Utilice medidas centradas en texto (em, ex) para elementos basados en texto , como áreas de contenido, etiquetas y cuadros de entrada. Es una forma fácil de asegurarse de que tenga espacio para texto de cierta longitud y ancho.
Use 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 sigue lo anterior y tus páginas se escalarán bien. SIEMPRE haga un acercamiento y alejamiento de sus páginas para ver cómo funcionan con diferentes tamaños de fuente y formas del navegador: no se sorprenda más tarde.

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

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

También para atributos de estilo max- y min- , está bien. Pero luego haga que el atributo no máximo / mínimo sea un porcentaje si es posible.