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

El mar Mediterráneo, hogar de más del 10 % de la biodiversidad marina mundial, se enfrenta a un proceso acelerado de degradación ecológica. Informes recientes advierten que su temperatura está aumentando un 20% más rápido que la media global, en un contexto de alteraciones térmicas sostenidas, pérdida de oxígeno y desplazamiento de especies sensibles.

Pilar Aznar fue pionera de la microbiología en España y mujer de fe inquebrantable en una época en que la presencia femenina en la ciencia era prácticamente inexistente, ella rompió barreras y dejó huella tanto en el ámbito científico como en el espiritual.

A pesar de su impresionante logro, el nombre de Emily Rosa ha pasado desapercibido para muchos, mientras que la técnica que cuestionó con su experimento continúa circulando en ciertos círculos. No obstante, su hazaña merece ser recordada pues, con apenas nueve años, se convirtió en la persona más joven en publicar un estudio científico en una revista médica de alto prestigio.

 
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