Por ejemplo, si nuestro tamaño de columna objetivo es de 60 píxeles, y el contexto (o contenedor) en el que se encuentra es de 960 píxeles, dividimos 60 entre 960 para obtener un valor que podemos utilizar en nuestro CSS, después de mover el punto decimal dos lugares a la derecha.
Este enfoque se encuentra en muchos lugares de la web hoy en día, y está documentado aquí en la sección de diseño de nuestro artículo sobre métodos de diseño heredados. Es probable que te encuentres con sitios web que utilicen este enfoque en tu trabajo, por lo que vale la pena entenderlo, aunque no construirías un sitio moderno utilizando una rejilla flexible basada en flotadores.
Tecnologías modernas de maquetaciónLos métodos modernos de maquetación, como la maquetación en varias columnas, Flexbox y Grid, son responsivos por defecto. Todos ellos asumen que usted está tratando de crear una rejilla flexible y le dan formas más fáciles de hacerlo.MulticolEl más antiguo de estos métodos de diseño es multicol – cuando usted especifica un recuento de columnas, esto indica cuántas columnas desea que su contenido sea dividido. El navegador calcula entonces el tamaño de éstas, un tamaño que cambiará según el tamaño de la pantalla.
Antes de que pases demasiado tiempo considerando las resoluciones exactas de los monitores para tu diseño, debes recordar que todo el diseño web moderno es responsivo, lo que significa que está diseñado para adaptarse a varias resoluciones de pantalla. Con un solo diseño, tienes que soportar desde las pantallas de móvil más pequeñas hasta los monitores de escritorio ultra HD.
Con el diseño web responsivo, se establecen diseños más generales para móviles, tabletas y ordenadores de sobremesa. El momento y la forma en que cada elemento de la página se desplaza a su lugar para estos diseños está determinado por puntos de ruptura especiales escritos en su CSS. Estos puntos de ruptura están determinados por ciertas resoluciones de pantalla comunes.
Si bien no te centrarás en resoluciones específicas ni establecerás un tamaño fijo para tus diseños, sí tendrás en cuenta las resoluciones de pantalla a la hora de establecer los puntos de ruptura y crear transiciones suaves para que tu sitio se vea bien en todos los dispositivos y tamaños de pantalla.
Puede que las tabletas no sean tan populares como antes, y el aumento del tamaño de los teléfonos junto con los portátiles convertibles parecen haber reducido significativamente su cuota de mercado. Aun así, la contabilidad de las resoluciones de las tabletas se solapa significativamente con la de los ordenadores de sobremesa y los portátiles. Puede utilizar los puntos de ruptura de las tabletas para crear puntos de ruptura para ciertos elementos problemáticos que no encajan bien en determinadas resoluciones.
Para soportar el mayor número posible de tamaños de pantalla, diseña los diseños de tu aplicación para que sean responsivos y adaptativos. Los diseños responsivos/adaptativos proporcionan una experiencia de usuario optimizada independientemente del tamaño de la pantalla, permitiendo que tu aplicación se adapte a teléfonos, tabletas, dispositivos plegables y Chrome OS, orientaciones vertical y horizontal, y configuraciones redimensionables como el modo multiventana.
Las clases de tamaño de ventana son un conjunto de puntos de interrupción de la ventana gráfica que le ayudan a diseñar, desarrollar y probar diseños de aplicaciones adaptables y con capacidad de respuesta. Los puntos de ruptura han sido elegidos específicamente para equilibrar la simplicidad del diseño con la flexibilidad para optimizar su aplicación para casos únicos.
Las clases de tamaño de ventana clasifican el área de visualización disponible para su aplicación como compacta, media o ampliada. La anchura y la altura disponibles se clasifican por separado, por lo que, en cualquier momento, tu aplicación tiene dos clases de tamaño de ventana: una para la anchura y otra para la altura. La anchura disponible suele ser más importante que la altura disponible debido a la omnipresencia del desplazamiento vertical, por lo que la clase de tamaño de ventana de la anchura será probablemente más relevante para la interfaz de usuario de tu aplicación.
Cuando se diseña un sitio web, una de las cosas más importantes que hay que tener en cuenta es asegurarse de que la página aparezca correctamente en pantallas y dispositivos de todos los tamaños. Este rápido artículo le dará consejos sobre cómo asegurarse de que su sitio web aparece correctamente en pantallas de todos los tamaños.
Definir la anchura relativa de una página es el método recomendado cuando se trata del diseño de páginas web debido a la capacidad de la página para ajustarse a pantallas de cualquier tamaño. Al definir la anchura en porcentaje en lugar de en número de unidades, se crea una cierta flexibilidad para cada pieza de la página, permitiendo que crezca o se reduzca en función de las especificaciones de la pantalla del espectador.
En este ejemplo, el código dicta que la página de su sitio web ocupará el 100% de la ventana, independientemente del tamaño de la pantalla. Si desea que su página aparezca ligeramente más pequeña, le recomendamos que defina una anchura no inferior al 80%, ya que de lo contrario corre el riesgo de que su contenido aparezca demasiado pequeño en la pantalla. Si defines una anchura menor, puedes centrar tu pantalla utilizando margin: auto.