Diseño Web Responsive HTML

El diseño web Responsive consiste en 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 vistas.

Qué es un diseño web Responsive

El diseño web Responsive 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 Responsive, agrega la siguiente etiqueta <meta> a todas sus páginas web:

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

Imágenes Responsive

Las imágenes Responsive son imágenes que se escalan bien para adaptarse a cualquier tamaño de navegador.

Usando la propiedad width

Si la propiedad CSS width se establece en 100%, la imagen responderá y se escalará hacia arriba y hacia abajo.

Ejm

<img src="img_girl.jpg" style="width:100%;">

Observa que en el ejemplo anterior, la imagen se puede escalar para que sea más grande que su tamaño original. Una mejor solución, en muchos casos, será utilizar 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 ampliará para que sea más grande que su tamaño original.

Ejm

<img src="img_girl.jpg" style="max-width:100%;height:auto;">

Mostrar diferentes imágenes según el ancho del navegador

El elemento HTML <picture> le 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 según el ancho.

Ejm

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<h2>Show Different Images Depending on Browser Width</h2>
<p>Resize the browser width and the image will change at 600px and 1500px.</p>

<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_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

</body>
</html>

Tamaño de texto Responsive

El tamaño del texto se puede establecer con una unidad “vw”, que significa “ancho de la ventana gráfica”.

De esa forma, el tamaño del texto seguirá el tamaño de la ventana del navegador.

Ejm

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<h1 style="font-size:10vw;">Responsive Text</h1>

<p style="font-size:5vw;">Resize the browser window to see how the text size scales.</p>

<p style="font-size:5vw;">Use the "vw" unit when sizing the text. 10vw will set the size to 10% of the viewport width.</p>

<p>Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm.</p>

</body>
</html>

Viewport es el tamaño de la ventana del navegador. 1vw = 1% del ancho de la ventana gráfica. Si la ventana tiene 50 cm de ancho, 1 vw es 0,5 cm.

Media Queries

Además de cambiar el tamaño del texto y las imágenes, también es común utilizar consultas de medios en páginas web Responsive.

Con las consultas de medios puede 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 y apilados verticalmente en pantallas pequeñas.

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:#4CAF50;
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: ejemplo completo

<!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>

Diseño web adaptable – Frameworks

Todos los marcos CSS populares ofrecen un diseño receptivo.

Son gratuitos y fáciles de usar.

W3.CSS

W3.CSS es un marco CSS moderno con soporte para escritorio, tableta y diseño móvil de forma predeterminada.

W3.CSS es más pequeño y más rápido que marcos CSS similares.

W3.CSS está diseñado para ser una alternativa de alta calidad a Bootstrap.

W3.CSS está diseñado para ser independiente de jQuery o de cualquier otra biblioteca de JavaScript.

Ejm

<!DOCTYPE html>
<html>
<head>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>

<div class="w3-container w3-green">
<h1>W3Schools Demo</h1> 
<p>Resize this responsive page!</p> 
</div>

<div class="w3-row-padding">
<div class="w3-third">
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>

<div class="w3-third">
<h2>Paris</h2>
<p>Paris is the capital of France.</p> 
<p>The Paris area is one of the largest population centers in Europe,
with more than 12 million inhabitants.</p>
</div>

<div class="w3-third">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
<p>It is the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>
</div>

</body>
</html>

Bootstrap

Otro marco CSS popular es Bootstrap. Bootstrap usa HTML, CSS y jQuery para crear páginas web receptivas.

Ejm

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
<div class="jumbotron">
<h1>My First Bootstrap Page</h1>
<p>Resize this responsive page to see the effect!</p> 
</div>
<div class="row">
<div class="col-sm-4">
<h3>Column 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-sm-4">
<h3>Column 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-sm-4">
<h3>Column 3</h3> 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
</div>
</div>

</body>
</html>

Si quieres saber más acerca de Bootstrap os dejamos un link a nuestro manual Bootstrap.

Bootstrap