Diseño Responsive

Media Queries

• Se pueden especificar el ancho y alto de un contenido para que se adapte a una pantalla de escritorio o de celular.
• Se utilizan para crear diseños adaptables en diferentes tipos de pantallas.
• Ejemplo de media query: @media (max-width: 600px) { p { display: block; background-color: black; color: red; } }

Tipos de Medios

• Existen diferentes tipos de medios en los que se pueden mostrar las páginas web.
• Algunos ejemplos son:
  • screen: Monitores o pantallas de ordenador.
  • print: Documentos de medios impresos o pantallas de previsualización de impresión.
  • all: Todos los dispositivos o medios.

Estrategias de Diseño

• Existen dos estrategias de diseño principales:
  • Mobile first: Se enfoca en dispositivos móviles y luego en otros dispositivos.
  • Desktop first: Se enfoca en dispositivos de escritorio y luego en otros dispositivos.

DISEÑO ADAPTABLE

• Hace que una página se vea bien en cualquier tamaño de dispositivo.
• Utiliza HTML y CSS.
• Se utiliza el área visible de una página (viewport) para adaptarse a diferentes tamaños de pantalla.

Configuración de Ancho y Alto

• Se pueden configurar el ancho y alto de la página utilizando porcentajes.
• Se utilizan las propiedades max-width, max-height, min-width y min-height para establecer límites para el contenido.

Media Query

• Regla o conjunto de reglas que se introducen en una hoja de estilo CSS para definir propiedades específicas para distintos tipos de medios.
• Ejemplo de media query: @media screen { p { background-color: blue; color: white; } }

CSS

• Se utiliza para estilizar elementos escritos en HTML.
• Separa el contenido de la representación visual del sitio.
• Se utilizan selectores, propiedades y valores para definir el estilo.

Colores

• Se pueden agregar colores utilizando nombres de colores, códigos hexadecimales, valores de RGB y valores HSL.
• Hay 147 colores definidos en HTML.
• Se pueden utilizar propiedades como color y background-color para agregar colores.

Tipos de Letra

• Se utilizan para hacer que un sitio se vea único y atractivo.
• Algunos tipos de letra comunes son Serif, Sans-serif y Monospace.
• Se utiliza la propiedad font-family para definir el tipo de letra.