¿Qué es la versión adaptativa de la página?

El diseño adaptable es un enfoque en el desarrollo web en el que el diseño y el contenido de la página se ajustan automáticamente al tamaño de la pantalla del dispositivo del usuario (escritorio, tableta, teléfono inteligente).

Principios básicos:

• Cuadrícula flexible (Fluid Grids): Uso de porcentajes u otras unidades relativas para definir el tamaño de los elementos en lugar de píxeles fijos.
• Imágenes flexibles (Flexible Images): Cambio de tamaño de las imágenes proporcionalmente para que no se desborden del contenedor.
• Consultas de medios (Media Queries): Reglas CSS que permiten aplicar estilos diferentes según las características del dispositivo, como ancho de pantalla, altura, orientación y resolución.

Ejemplo de uso de una consulta de medios en CSS:

/* Estilos generales para todos los dispositivos */
body {
    font-size: 16px;
}

/* Estilos para pantallas de hasta 768px de ancho (por ejemplo, tablets y móviles) */
@media (max-width: 768px) {
    body {
        font-size: 14px;
    }
    nav {
        /* Ejemplo de cambio en el diseño de navegación */
        display: flex;
        flex-direction: column;
    }
}

/* Estilos para pantallas de hasta 480px de ancho (por ejemplo, teléfonos móviles) */
@media (max-width: 480px) {
    body {
        font-size: 12px;
    }
    img {
        /* Las imágenes ocupan todo el ancho del contenedor */
        max-width: 100%;
        height: auto;
    }
}

El objetivo del diseño adaptable es garantizar la comodidad de uso del sitio en cualquier dispositivo sin necesidad de crear versiones separadas de las páginas.

Las pruebas de la versión adaptable incluyen verificar:

• La correcta visualización de los elementos en diferentes resoluciones.
• La facilidad de navegación e interacción.
• La ausencia de desplazamiento horizontal.
• La legibilidad del texto.
• El rendimiento en la carga de la página.