Design Web responsivo HTML

Cos'è il Responsive Web Design?

  • Il RWD sta per Responsive Web Design (Responsive Web Design)
  • Il RWD può trasmettere le pagine web in dimensioni variabili
  • Il RWD è essenziale per tablet e dispositivi mobili

Crea il tuo design responsive personale

Un altro metodo per creare un design responsive è crearelo da zero:

<!DOCTYPE html>
<html lang="en-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>Ridimensiona questa pagina responsive!</h2>
<br>
<div class="city">
<h2>London</h2>
<p>London è la capitale della Gran Bretagna.</p>
<p>È la città più popolata del Regno Unito,</p>
<p>con un'area metropolitana di oltre 13 milioni di abitanti.</p>
</div>
<div class="city">
<h2>Parigi</h2>
<p>Parigi è la capitale e la città più popolata della Francia.</p>
</div>
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo è la capitale del Giappone, il centro della Greater Tokyo Area,</p>
e la più grande area metropolitana della mondo.</p>
</div>
</body>
</html>

Prova tu stesso

Usa Bootstrap

Un altro metodo per creare un design responsive è utilizzare una framework CSS preesistente.

Bootstrap è la framework più popolare per lo sviluppo di web responsive in HTML, CSS e JS.

Bootstrap Vi aiuta a sviluppare siti con un aspetto eccezionale su qualsiasi dimensione: schermo, laptop, tablet o telefono:

<!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>Ridimensiona questa pagina responsive!</p> 
</div>
</div>
<div class="container">
<div class="row">
  <div class="col-md-4">
    <h2>London</h2>
    <p>London è la capitale della Gran Bretagna.</p>
    <p>È la città più popolata del Regno Unito,</p>
    <p>con un'area metropolitana di oltre 13 milioni di abitanti.</p>
  </div>
  <div class="col-md-4">
    <h2>Parigi</h2>
    <p>Parigi è la capitale e la città più popolata della Francia.</p>
  </div>
  <div class="col-md-4">
    <h2>Tokyo</h2>
    <p>Tokyo è la capitale del Giappone, il centro della Greater Tokyo Area,</p>
    e la più grande area metropolitana della mondo.</p>
  </div>
</div>
</div>
</body>
</html>

Prova tu stesso

Per imparare di più su Bootstrap, leggi il nostro Corso Bootstrap.