El diseño web Responsive trata de crear páginas web que se vean bien en todos los dispositivos. Un diseño web Responsive se ajustará automáticamente a diferentes tamaños de pantalla y ventanas gráficas.
Que es un diseño web Responsive?
El diseño web Responsive se trata de usar HTML y CSS para cambiar el tamaño, ocultar, reducir o ampliar automáticamente un sitio web, para que se vea bien en todos los dispositivos (computadoras de escritorio, tabletas y teléfonos).
Ejm
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
.menu {
float: left;
width: 20%;
}
.menuitem {
padding: 8px;
margin-top: 7px;
border-bottom: 1px solid #f1f1f1;
}
.main {
float: left;
width: 60%;
padding: 0 20px;
overflow: hidden;
}
.right {
background-color: lightblue;
float: left;
width: 20%;
padding: 10px 15px;
margin-top: 7px;
}
@media only screen and (max-width:800px) {
/* For tablets: */
.main {
width: 80%;
padding: 0;
}
.right {
width: 100%;
}
}
@media only screen and (max-width:500px) {
/* For mobile phones: */
.menu, .main, .right {
width: 100%;
}
}
</style>
</head>
<body style="font-family:Verdana;">
<div style="background-color:#f1f1f1;padding:15px;">
<h1>Cinque Terre</h1>
<h3>Resize the browser window</h3>
</div>
<div style="overflow:auto">
<div class="menu">
<div class="menuitem">The Walk</div>
<div class="menuitem">Transport</div>
<div class="menuitem">History</div>
<div class="menuitem">Gallery</div>
</div>
<div class="main">
<h2>The Walk</h2>
<p>The walk from Monterosso to Riomaggiore will take you approximately
two hours, give or take an hour depending on the weather conditions
and your physical shape.</p>
<img src="img_5terre.jpg" style="width:100%">
</div>
<div class="right">
<h2>What?</h2>
<p>Cinque Terre comprises five villages: Monterosso, Vernazza, Corniglia,
Manarola, and Riomaggiore.</p>
<h2>Where?</h2>
<p>On the northwest cost of the Italian Riviera, north of the city
La Spezia.</p>
<h2>Price?</h2>
<p>The Walk is free!</p>
</div>
</div>
<div style="background-color:#f1f1f1;text-align:center;padding:10px;margin-top:7px;font-size:12px;">
This web page is a part of a demonstration of fluid web
design made by w3schools.com. Resize the browser window to
see the content respond to the resizing.</div>
</body>
</html>Configuración de la ventana gráfica (Viewport)
Para crear un sitio web Reponsive, agrega la siguiente etiqueta <meta> a todas tus páginas web:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Esto configurará la ventana gráfica de tu página, que le dará al navegador instrucciones sobre cómo controlar las dimensiones y la escala de la página.
Este es un ejemplo de una página web sin la metaetiqueta de ventana gráfica y la misma página web con la metaetiqueta de ventana gráfica:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Sugerencia: si estás navegando por esta página en un teléfono o tableta, puedes hacer clic en los dos enlaces de arriba para ver la diferencia.
Imagenes Responsive
Las imágenes Responsive son imágenes que se escalan muy bien para adaptarse a cualquier tamaño de navegador.
Usando la propiedad width
Si la propiedad CSS se establece en 100%, la imagen responderá y se escalará hacia arriba y hacia abajo.
Ejm
<img src="img_girl.jpg" style="width:100%;">
Ten en cuenta que en el ejemplo anterior, la imagen se puede ampliar para que sea más grande que su tamaño original. Una mejor solución, en muchos casos, será usar la propiedad max-width en su lugar.
Usando la propiedad max-width
Si la propiedad max-width se establece en 100%, la imagen se reducirá si es necesario, pero nunca se escalará para ser más grande que su tamaño original:
Ejm
<img src="img_girl.jpg" style="max-width:100%;height:auto;">
Mostrar diferentes imágenes dependiendo del navegador
El elemento HTML <picture> te permite definir diferentes imágenes para diferentes tamaños de ventana del navegador. Cambia el tamaño de la ventana del navegador para ver cómo cambia la imagen de abajo dependiendo del ancho.
Ejm
<picture> <source srcset="img_smallflower.jpg" media="(max-width: 600px)"> <source srcset="img_flowers.jpg" media="(max-width: 1500px)"> <source srcset="flowers.jpg"> <img src="img_smallflower.jpg" alt="Flowers"> </picture>
Tamaño de texto Responsive
El tamaño del texto se puede configurar con una unidad «vw», lo que significa el «ancho de la ventana gráfica». De esa forma, el tamaño del texto seguirá el tamaño de la ventana del navegador.
Ejm
<h1 style="font-size:10vw">Hello World</h1>
Viewport es el tamaño de la ventana del navegador. 1vw = 1% del ancho de la ventana gráfica. Si la ventana gráfica tiene 50 cm de ancho, 1vw es 0,5 cm.
Media Queries
Además de cambiar el tamaño de texto e imágenes, también es común usar consultas de medios en páginas web Responsive. Con las consultas de medios, puedes definir estilos completamente diferentes para diferentes tamaños de navegador. Ejemplo: cambia el tamaño de la ventana del navegador para ver que los tres elementos div a continuación se mostrarán horizontalmente en pantallas grandes.
Ejm
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
.left {
background-color: #2196F3;
padding: 20px;
float: left;
width: 20%; /* The width is 20%, by default */
}
.main {
background-color: #f1f1f1;
padding: 20px;
float: left;
width: 60%; /* The width is 60%, by default */
}
.right {
background-color: #04AA6D;
padding: 20px;
float: left;
width: 20%; /* The width is 20%, by default */
}
/* Use a media query to add a break point at 800px: */
@media screen and (max-width: 800px) {
.left, .main, .right {
width: 100%; /* The width is 100%, when the viewport is 800px or smaller */
}
}
</style>
</head>
<body>
<h2>Media Queries</h2>
<p>Resize the browser window.</p>
<p>Make sure you reach the breakpoint at 800px when resizing this frame.</p>
<div class="left">
<p>Left Menu</p>
</div>
<div class="main">
<p>Main Content</p>
</div>
<div class="right">
<p>Right Content</p>
</div>
</body>
</html>Página web Responsive – Diseño completo
Una página web Responsive debe verse bien en pantallas de escritorio grandes y en teléfonos móviles pequeños.
Ejm
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
.menu {
float: left;
width: 20%;
text-align: center;
}
.menu a {
background-color: #e5e5e5;
padding: 8px;
margin-top: 7px;
display: block;
width: 100%;
color: black;
}
.main {
float: left;
width: 60%;
padding: 0 20px;
}
.right {
background-color: #e5e5e5;
float: left;
width: 20%;
padding: 15px;
margin-top: 7px;
text-align: center;
}
@media only screen and (max-width: 620px) {
/* For mobile phones: */
.menu, .main, .right {
width: 100%;
}
}
</style>
</head>
<body style="font-family:Verdana;color:#aaaaaa;">
<div style="background-color:#e5e5e5;padding:15px;text-align:center;">
<h1>Hello World</h1>
</div>
<div style="overflow:auto">
<div class="menu">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
</div>
<div class="main">
<h2>Lorum Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
<div class="right">
<h2>About</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
</div>
<div style="background-color:#e5e5e5;text-align:center;padding:10px;margin-top:7px;">
© copyright w3schools.com</div>
</body>
</html>