Många webbsidor är baserade på en rutnätsvy, vilket innebär att sidan är indelad i kolumner:
Att använda en rutnätsvy är mycket användbart när du designar webbsidor. Det gör det lättare att placera element på sidan.
En responsiv rutnätsvy har ofta 12 kolumner och har en total bredd på 100 %, och kommer att krympa och expandera när du ändrar storlek på webbläsarfönstret.
Exempel: Responsiv rutnätsvy:
Låt oss börja bygga en responsiv rutnätsvy.
Se först till att alla HTML-element har egenskapen box-sizing
inställd på border-box
. Detta säkerställer att stoppning och bård ingår i den totala bredden och höjden på elementen.
Lägg till följande kod i din CSS:
* {
box-sizing: border-box;
}
Läs mer om egenskapen box-sizing
i vårt kapitel om CSS Box Sizing.
Följande exempel visar en enkel responsiv webbsida med två kolumner:
.menu {
width: 25%;
float: left;
}
.main {
width: 75%;
float: left;
}
Prova själv →
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
.header {
border: 1px solid red;
padding: 15px;
}
.menu {
width: 25%;
float: left;
padding: 15px;
border: 1px solid red;
}
.main {
width: 75%;
float: left;
padding: 15px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="header">
<h1>Chania</h1>
</div>
<div class="menu">
<ul>
<li>The Flight</li>
<li>The City</li>
<li>The Island</li>
<li>The Food</li>
</ul>
</div>
<div class="main">
<h1>The City</h1>
<p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
<p>Resize the browser window to see how the content respond to the resizing.</p>
</div>
</body>
</html>
Exemplet ovan är bra om webbsidan bara innehåller två kolumner.
Däremot vill vi använda en responsiv rutnätsvy med 12 kolumner, för att ha fler kontroll över webbsidan.
Först måste vi beräkna procentsatsen för en kolumn: 100%/12 kolumner = 8,33 %.
Då vi gör en klass för var och en av de 12 kolumnerna, class="col-"
och ett nummer definiera hur många kolumner avsnittet ska sträcka sig över:
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width:
100%;}
Prova själv →
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
.header {
border: 1px solid red;
padding: 15px;
}
.row::after {
content: "";
clear: both;
display: table;
}
[class*="col-"] {
float: left;
padding: 15px;
border: 1px solid red;
}
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
</style>
</head>
<body>
<div class="header">
<h1>Chania</h1>
</div>
<div class="row">
<div class="col-3">
<ul>
<li>The Flight</li>
<li>The City</li>
<li>The Island</li>
<li>The Food</li>
</ul>
</div>
<div class="col-9">
<h1>The City</h1>
<p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
<p>Resize the browser window to see how the content respond to the resizing.</p>
</div>
</div>
</body>
</html>
Alla dessa kolumner ska vara flytande till vänster och ha en utfyllnad på 15px:
[class*="col-"] {
float: left;
padding: 15px;
border: 1px solid red;
}
Varje rad ska lindas in i en
<div class="row">
<div class="col-3">...</div> <!-- 25% -->
<div class="col-9">...</div> <!-- 75% -->
</div>
Kolumnerna inuti en rad är alla flytande till vänster och är därför tas ur sidans flöde och andra element kommer att placeras som om kolumnerna inte existerade. För att förhindra detta kommer vi att göra det lägg till en stil som rensar flödet:
.row::after {
content: "";
clear: both;
display: table;
}
Vi vill också lägga till några stilar och färger för att få det att se bättre ut:
html {
font-family: "Lucida Sans", sans-serif;
}
.header {
background-color: #9933cc;
color: #ffffff;
padding: 15px;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom: 7px;
background-color :#33b5e5;
color: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
background-color: #0099cc;
}
Prova själv →
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
.row::after {
content: "";
clear: both;
display: table;
}
[class*="col-"] {
float: left;
padding: 15px;
}
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
html {
font-family: "Lucida Sans", sans-serif;
}
.header {
background-color: #9933cc;
color: #ffffff;
padding: 15px;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom: 7px;
background-color: #33b5e5;
color: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
background-color: #0099cc;
}
</style>
</head>
<body>
<div class="header">
<h1>Chania</h1>
</div>
<div class="row">
<div class="col-3 menu">
<ul>
<li>The Flight</li>
<li>The City</li>
<li>The Island</li>
<li>The Food</li>
</ul>
</div>
<div class="col-9">
<h1>The City</h1>
<p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
<p>Resize the browser window to see how the content respond to the resizing.</p>
</div>
</div>
</body>
</html>
Observera att webbsidan i exemplet inte ser bra ut när du ändrar storlek på webbläsarfönstret till en mycket liten bredd. I nästa kapitel kommer du att lära dig hur du fixar det.