21. HTML reagoiva ulkoasu
Reagoivan HTML ulkoasun teko
Nettisivusi tulisi näyttää hyvältä, ja olla helppokäyttöinen riippumatta millä laitteella sitä katsot.
Mikä on reagoiva web sivun ulkoasu?
Reagoiva web sivun ulkoasu tekee sinun nettisivustasi hyvän millä laitteella tahansa.(pöytäkoneet, tabletit, läppärit, kännykät).
Reagoiva web sivun ulkoasu on osaltaan CSS koodia ja HTML koodia kokoon, leveyteen ja pituuteen vaikuttavissa riveissä, sekä että saat sivustosi näyttämään hyvältä millä tahansa laitteella:
Tee oma reagoiva web sivusi
Yksi tapa toteuttaa tämä, on tehdä se alusta asti itse:
Esimerkki
<!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>Reagoivan web sivun demo</h1>
<div class="city">
<h2>Lontoo</h2>
<p>Lontoo on Englannin pääkaupunki.</p>
</div>
<div class="city">
<h2>Pariisi</h2>
<p>Pariisi on Ranskan pääkaupunki.</p>
</div>
<div class="city">
<h2>Tokio</h2>
<p>Tokio on Japanin pääkaupunki.</p>
</div>
</body>
</html>