¿Cuál es el sentido de usar unidades% en el diseño receptivo?

Question

Estoy rediseñando mi sitio porque se ve horrible en diferentes resoluciones (aparte de dispositivos), la mayoría de las guías y tutoriales se basan en % y em que los valores fijos. Todavía estoy aprendiendo esto, así que estoy leyendo todo a mi alrededor.

Pensé que esto resolvería la cuestión con diferentes tamaños de pantalla, pero una vez más: tenemos que crear un poco más de CSS para solucionar algunos problemas específicos.

Si necesito agregar consultas de medios para tamaños de pantalla adicionales, ¿por qué usar%? ¿Usa% realmente reduce la codificación? Está bien, ¿necesita agregar css extra para algunos tamaños o estoy haciendo algo mal?

¡Gracias por cualquier consejo!

Answer 1

El propósito de usar los tamaños em es permitir que la base de su diseño esté libre de la elección del tamaño de letra del usuario. Puedo usar un tamaño de letra más grande porque tengo un monitor enorme y una vista pobre, mientras que otra persona podría preferir una fuente más pequeña. Al usar las unidades em, su diseño acomodará nuestras dos preferencias de fuente y cambiará el tamaño según corresponda en lugar de forzar el tamaño de fuente a un estándar dado (por ejemplo, "fuente de 12 puntos").

De manera similar, el porcentaje (%) de unidades permite que su diseño responda a diferentes tamaños de navegador. Usado junto con las unidades em, esto permitirá que los elementos basados ​​en texto respondan a las opciones arbitrarias de tamaño de fuente, y elementos de diseño para responder a tamaños de navegador arbitrarios.

es perfectamente aceptable para diseñar un único diseño de respuesta para todos los tipos de medios. Media queries están destinados cuando se desea diferentes estilos de visualización en diferentes dispositivos, no a "apoyo" diferentes tamaños de pantalla. Un ejemplo sería el uso de fuentes serif en los medios de impresión y fuentes sans serif en los medios de visualización, ya que los estudios usabilities han demostrado que estas caras de la fuente son los preferidos para este tipo de medios de comunicación.

Además, le permite hacer un estilo personalizado para algunas situaciones, como dispositivos móviles, donde es posible que desee considerar que el usuario tiene un ancho de banda limitado y tal vez reduzca las imágenes adicionales. O si desea mostrar su contenido en un diseño completamente diferente para la pantalla microscópica que ofrecen ciertos teléfonos.

Answer 2

% permite que su sitio responda al método de visualización del usuario. Supongamos que tiene un div que está en 100%. Va a llenar toda la sección, independientemente de si está en un teléfono o escritorio.

Debería estar bien agregar CSS adicional para los tamaños también. Por lo que yo sé, puede hacer que algunos elementos se muestran en % y algunas de ellas con un valor fijo px, a pesar de que la fuerza conflicto dependiendo de cómo es la página de configuración o lo que se está viendo con.

Answer 3

Por ejemplo.

El encabezado de su sitio web tiene un ancho de 950px; Pero en un dispositivo móvil, puede caber a 450px;

Por lo tanto, utiliza la consulta de medios para reposicionar algunos elementos y resolver algunos problemas de tamaño y establecer el ancho del encabezado en 450px;

Pero, si usa% values, puede configurar su div de encabezado para tener el 100% de ancho base en su elemento principal. Entonces solo puedes cambiar el cuerpo o el ancho de algunos div contenedores, todos los niños se adaptarán.

Answer 4

Diana,

Me alegro de haber encontrado esta pregunta. Literalmente, acabo de subir mi primer diseño receptivo, que está basado en un 90% de porcentajes cuando se trata del tamaño y el ancho de la fuente.

Salida el siguiente: http://www.noxinnovations.com/portfolio/responsive/

Obviamente, no se ve increíble, y la imagen se ve mucho fuera de lugar ... Pero hazme un favor y cambiar el tamaño de la ventana del navegador, por lo que poco a poco se cada vez más pequeño ¡Lo hice al establecer un porcentaje de ancho!

Créeme, traté de hacer esta prueba de diseño sensible con píxeles, y no resultó demasiado bien. El ancho de porcentaje asegura que, independientemente de la resolución o las dimensiones de píxel (per se), el diseño siempre se adaptará al tamaño de la pantalla. Además, no tuve que usar una consulta de medios CSS3, pero le sugiero que use las consultas de medios de CSS3 solo cuando los necesite.

En mi opinión, probablemente debería tener una consulta de medios para una pantalla más grande.

Espero que esto te ayude tanto como me ha ayudado! Gracias, Aaron