Conception Web responsive HTML

Qu'est-ce que le Design Web Réactif ?

  • Le RWD signifie Responsive Web Design (Design Web Réactif)
  • Le RWD peut transmettre des pages web à des tailles variables
  • Le RWD est indispensable pour les tablettes et les appareils mobiles

Créez votre propre design réactif

Une méthode pour créer un design réactif consiste à le créer vous-même :

<!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>Demo CodeW3C.com</h1>
<h2>Réduisez cette page réactive !</h2>
<br>
<div class="city">
<h2>London</h2>
<p>London est la capitale de l'Angleterre.</p>
<p>C'est la ville la plus peuplée du Royaume-Uni,</p>
<p>avec une aire métropolitaine de plus de 13 millions d'habitants.</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris est la capitale et la ville la plus peuplée de France.</p>
</div>
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo est la capitale du Japon, le centre de la grande région de Tokyo,</p>
et la plus grande agglomération urbaine du monde.</p>
</div>
</body>
</html>

Essayez-le vous-même

Utilisez Bootstrap

Une autre méthode pour créer un design réactif consiste à utiliser des frameworks CSS prêts à l'emploi.

Bootstrap est le cadre HTML, CSS et JS le plus populaire pour développer des sites web réactifs.

Bootstrap aide à développer des sites qui apparaissent magnifiques à toutes les tailles : écrans, ordinateurs portables, tablettes ou smartphones :

<!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>Demo CodeW3C.com</h1> 
  <p>Réduisez cette page responsive!</p> 
</div>
</div>
<div class="container">
<div class="row">
  <div class="col-md-4">
    <h2>London</h2>
    <p>London est la capitale de l'Angleterre.</p>
    <p>C'est la ville la plus peuplée du Royaume-Uni,</p>
    <p>avec une aire métropolitaine de plus de 13 millions d'habitants.</p>
  </div>
  <div class="col-md-4">
    <h2>Paris</h2>
    <p>Paris est la capitale et la ville la plus peuplée de France.</p>
  </div>
  <div class="col-md-4">
    <h2>Tokyo</h2>
    <p>Tokyo est la capitale du Japon, le centre de la grande région de Tokyo,</p>
    et la plus grande agglomération urbaine du monde.</p>
  </div>
</div>
</div>
</body>
</html>

Essayez-le vous-même

Pour en savoir plus sur Bootstrap, veuillez lire notre Tutoriel Bootstrap.