HTML responsiv webdesign

Hvad er responsiv web design?

  • RWD betyder Responsiv Web Design (Responsive Web Design)
  • RWD kan overføre websider i variable størrelser
  • RWD er nødvendig for tablets og mobile enheder

Opret din egen responsiv design

En måde at skabe responsiv design på, er ved at gøre det selv:

!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>Juster denne responsive side!</h2>
<br>
<div class="city">
<h2>London</h2>
<p>London er hovedstaden i England.</p>
<p>Det er den mest befolkede by i Storbritannien,</p>
<p>med et metropolområde på over 13 millioner indbyggere.</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris er hovedstaden og mest befolkede by i Frankrig.</p>
</div>
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo er hovedstaden i Japan, centrum for den større Tokyo-området,</p>
og den mest befolkede metropolområdet i verden.</p>
</div>
</body>
</html>

Try It Yourself

Brug Bootstrap

En anden måde at skabe responsiv design på, er ved at bruge færdige CSS rammer.

Bootstrap er den mest populære HTML, CSS og JS ramme til udvikling af responsiv web.

Bootstrap hjælper dig med at udvikle sites med fremragende udseende i alle skærmstørrelser: skærme, bærbare computere, tablets eller mobiltelefoner:

!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>Ændr størrelsen på denne responsiv side!</p> 
</div>
</div>
<div class="container">
<div class="row">
  <div class="col-md-4">
    <h2>London</h2>
    <p>London er hovedstaden i England.</p>
    <p>Det er den mest befolkede by i Storbritannien,</p>
    <p>med et metropolområde på over 13 millioner indbyggere.</p>
  </div>
  <div class="col-md-4">
    <h2>Paris</h2>
    <p>Paris er hovedstaden og mest befolkede by i Frankrig.</p>
  </div>
  <div class="col-md-4">
    <h2>Tokyo</h2>
    <p>Tokyo er hovedstaden i Japan, centrum for den større Tokyo-området,</p>
    og den mest befolkede metropolområdet i verden.</p>
  </div>
</div>
</div>
</body>
</html>

Try It Yourself

To learn more about Bootstrap, please read our Bootstrap Tutorial.