Siglo XXI. Diario digital independiente, plural y abierto. Noticias y opinión
Viajes y Lugares Tienda Siglo XXI Grupo Siglo XXI
21º ANIVERSARIO
Fundado en noviembre de 2003
Ciencia
Etiquetas | web | Diseño | Remitido

Cómo saber cuando una web es Responsive

Una opción es cambiar la resolución de pantalla
Redacción
martes, 13 de octubre de 2015, 05:57 h (CET)

Una Web responsive o el denominado "Responsive Web Design" o RWD es una técnica de diseño y desarrollo de páginas y aplicaciones Web que permite que éstas se adapten al tamaño, orientación y la resolución y de la pantalla; lo que equivale a decir que se adaptan eficazmente al dispositivo de los usuarios. Se consigue mediante un código único, una única página, una única URL.

¿Cómo sabes si una Web es responsive?

No es necesario visualizar una Web en diferentes dispositivos para comprobar si es responsive o no. Tan solo necesitas visualizarla desde tu escritorio y redimensionar la pantalla del navegador. Según vayas variando el tamaño de la pantalla, comprobarás, o no, que el diseño, el contenido y las imágenes se reconfiguran automáticamente.<br><br>

Otra opción válida es cambiar la resolución de pantalla: Selecciona una resolución baja y comprobarás la visualización de la Web para esa resolución. ¿Funciona? Ya sabes si una Web es responsive o no, por si continuas teniendo dudas, aquí tienes un ejemplo de  sitio “responsive”, en este caso esta totalmente optimizado y se adapta a cualquier navegador, resolución de pantalla,etc...

Ahora pasemos a ver cómo adaptar un vídeo en una Web responsiva

Primero de todo, hay que diferenciar dos tipo de vídeos: HTML5 y los de los servicios externos: Youtube, Vimeo, etc.... Donde son <iframe> y tendremos que incrustarlo.

Vídeo HTML5

Para estos no hay ninguna complicación, es como utilizar un elemento <img>.

Si tenemos que adaptar el vídeo al ancho total de la pantalla, haríamos:

video {

width:100%;

}

Ya contamos con el tamaño máximo que y cuando no se pueda adaptar a la página por cambio de dispositivo o tamaño, se hará automáticamente más pequeño:

img {

width:100%;

max-width:640px;

}

Servicios externos

Trabajando con vídeos con etiquetas <iframe> se complica la adaptación. Para ello hay que hacer un proceso algo complejo.

Contamos con 2 opciones:

1- El vídeo se adapta al ancho del contenedor (el estándar es de 640 píxeles).

2- Limitamos el ancho a uno concreto.

A continuación:

Redimensionamos el contenedor del vídeo para que conserve el ratio- relación entre el alto y el ancho-.<br>

Hacemos:

Introducimos <iframe> dentro de una etiqueta <div> con alto 0px y ancho 100%, y usamos un truquillo para que cuente con el tamaño del vídeo padding-top y establecemos el valor porcentual de su ratio de imagen, que suele ser 16:9, voy a poner varias relaciones:

Dividimos el alto entre el ancho y el padding-top se adaptará según esta relación al ancho:<br><br>

16:9--->9/16*100 = 56,25%

4:3--->3/4*100 = 75%

Ya lo tenemos listo para la etiqueta <div y con ella nos aseguramos que se va a adaptar para tener el ratio adecuado, ahora hacemos que el <iframe> flote sobre la etiqueta anterior y se adopte a su alto y ancho (alto y ancho: 100% y posición: absolute).

Como último paso si no queremos que el vídeo ocupe el 100% del ancho de la página o contenedor), lo delimitaremos con otra nueva etiqueta <div> que contarán el ancho máximo que necesitamos.

Noticias relacionadas

Un total de 80 estudiantes de 4ª de ESO han participado durante el mes de julio en el Campus de Profundización Científica celebrado en Soria, un programa que tiene como objetivo fomentar las vocaciones científicas entre los adolescentes y premiar el esfuerzo académico y que ha finalizado este miércoles. Para esta edición de 2025 -el programa se realizó por primera vez en el verano de 2022-, se registraron 745 solicitudes de alumnos de diferentes comunidades autónomas.

El 23 de julio se conmemora el Día Mundial de las Ballenas y los Delfines, una fecha establecida en 1986 por la Comisión Ballenera Internacional (CBI) con el propósito de detener la caza indiscriminada de estos mamíferos marinos en peligro de extinción y fomentar su conservación.

La demanda de servicios de polinización en cultivos y la producción de miel ha derivado en las últimas décadas en un aumento a nivel global del número de colmenas de abejas melíferas (Apis mellifera L.). Sin embargo, a medida que las prácticas agrícolas se vuelven cada vez más dependientes de esta única especie, ha surgido preocupación por las posibles consecuencias ecológicas de su uso generalizado.

 
Quiénes somos  |   Sobre nosotros  |   Contacto  |   Aviso legal  |   Suscríbete a nuestra RSS Síguenos en Linkedin Síguenos en Facebook Síguenos en Twitter   |  
© 2025 Diario Siglo XXI. Periódico digital independiente, plural y abierto | Director: Guillermo Peris Peris
© 2025 Diario Siglo XXI. Periódico digital independiente, plural y abierto