Curso IT Fundamentos CSS 033_Diseño responsivo

Diseño responsivo

El diseño responsivo es un método de diseño web que puede adaptarse a diferentes tamaños de pantalla y dispositivos. Mediante el uso del diseño responsivo, se puede mantener un buen efecto de visualización en la página web en diferentes dispositivos, ya sea en computadoras de escritorio, tabletas o teléfonos móviles.

Media Queries

El uso de media queries de CSS permite aplicar diferentes estilos según las características del dispositivo (como ancho de pantalla, altura, tipo de dispositivo, etc.). Esto le permite definir diferentes diseños para diferentes tamaños de pantalla.

Ejemplo:

1
/* PC */
2
@media (min-width: 992px) {
3
    * {
4
        background: yellow
5
    }
6
}
7
/* Tableta */
8
@media (min-width: 768px) and (max-width: 992px) {
9
    * {
10
        background: red
11
    }
12
}
13
/* Teléfono normal */
14
@media (min-width: 576px) and (max-width: 768px) {
15
    * {
16
        background: green
17
    }
18
}
19
/* Pantalla pequeña */
20
@media (max-width: 576px) {
21
    * {
22
       background: blue
23
    }
24
}

Efecto:

Imágenes responsivas

Use max-width: 100%; para asegurar que las imágenes y los elementos multimedia no excedan su contenedor en pantallas pequeñas. Ejemplo:

1
    img {
2
      max-width: 100%; /* Ancho máximo de la imagen es el 100% del elemento contenedor */
3
      height: auto;    /* Mantener la relación de aspecto, evitar deformación de la imagen */
4
    }
5

6
    /* Ajustar el tamaño de la imagen en pantallas pequeñas */
7
    @media screen and (max-width: 600px) {
8
      img {
9
        max-width: 50%; /* Ancho máximo de la imagen es el 50% del elemento contenedor */
10
      }
11
    }

1
    <img src="zhaojian.jpg" alt="Responsive Image">

Efecto:

Configuración del viewport

Use la etiqueta <meta> para configurar el viewport y asegurar que la página se escale correctamente en dispositivos móviles.

Ejemplo:

1
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Esta metaetiqueta le dice a los navegadores móviles que deben establecer el ancho del viewport al ancho del dispositivo y ampliar el documento al 100% de su tamaño esperado, mostrando el documento en el tamaño optimizado para dispositivos móviles que desea.

Junto con la metaetiqueta de viewport, puede usar varias otras configuraciones, pero en general, la línea anterior es la que desea usar.

• initial-scale: Establece el zoom inicial de la página, lo establecemos en 1.
• height: Establece una altura específica para el viewport.
• minimum-scale: Establece el nivel mínimo de zoom.
• maximum-scale: Establece el nivel máximo de zoom.
• user-scalable: Previene el zoom si se establece en no.

Evite usar minimum-scale, maximum-scale, especialmente user-scalable establecido en no, para garantizar que los usuarios puedan reducir y ampliar por sí mismos.