Diseño web responsivo HTML

¿Qué es el Diseño Web Responsivo?

  • RWD se refiere a Diseño Web Responsivo (Responsive Web Design)
  • RWD puede transmitir páginas web en tamaños variables
  • RWD es esencial para tablets y dispositivos móviles

Crear tu propio diseño responsive

Una manera de crear un diseño responsive es hacerlo oneself:

!DOCTYPE html
<html lang="es-US">
<head>
<style>
.city {
float: left;
margin: 5px;
padding: 15px;
width: 300px;
height: 300px;
border: 1px solid black;
} 
</style>
</head>
<body>
<h1>CodeW3C.com Demo</h1>
<h2>¡Ajusta este página responsive!</h2>
<br>
<div class="city">
<h2>London</h2>
<p>London es la ciudad capital de Inglaterra.</p>
<p>Es la ciudad más poblada del Reino Unido,</p>
<p>con una área metropolitana de más de 13 millones de habitantes.</p>
</div>
<div class="city">
<h2>París</h2>
<p>París es la capital y la ciudad más poblada de Francia.</p>
</div>
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo es la capital de Japón, el centro del Gran Área de Tokio,</p>
y la área metropolitana más poblada del mundo.</p>
</div>
</body>
</html>

Pruebe por sí mismo

Usar Bootstrap

Otra manera de crear un diseño responsive es usando marcos CSS predefinidos.

Bootstrap es el framework más popular para desarrollar web responsive con HTML, CSS y JS.

Bootstrap ayuda a desarrollar sitios que se ven impresionantes en cualquier tamaño: monitor, portátil, tableta o teléfono:

!DOCTYPE html
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" 
  href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="jumbotron">
  <h1>CodeW3C.com Demo</h1> 
  <p>¡Ajuste esta página responsiva!</p> 
</div>
</div>
<div class="container">
<div class="row">
  <div class="col-md-4">
    <h2>London</h2>
    <p>London es la ciudad capital de Inglaterra.</p>
    <p>Es la ciudad más poblada del Reino Unido,</p>
    <p>con una área metropolitana de más de 13 millones de habitantes.</p>
  </div>
  <div class="col-md-4">
    <h2>París</h2>
    <p>París es la capital y la ciudad más poblada de Francia.</p>
  </div>
  <div class="col-md-4">
    <h2>Tokyo</h2>
    <p>Tokyo es la capital de Japón, el centro del Gran Área de Tokio,</p>
    y la área metropolitana más poblada del mundo.</p>
  </div>
</div>
</div>
</body>
</html>

Pruebe por sí mismo

Para aprender más sobre Bootstrap, lea nuestra Tutoriales de Bootstrap.