Responsywne projektowanie stron internetowych — widok siatki
Co to jest widok siatki?
Wiele stron internetowych jest opartych na widoku siatki, co oznacza, że strona jest podzielona na kolumny:
Korzystanie z widoku siatki jest bardzo pomocne podczas projektowania stron internetowych. Ułatwia umieszczanie elementów na stronie.
Responsywny widok siatki często ma 12 kolumn i całkowitą szerokość 100%, a także będzie się kurczyć i rozszerzać w miarę zmiany rozmiaru okna przeglądarki.
Przykład: responsywny widok siatki
Tworzenie responsywnego widoku siatki
Zacznijmy budować responsywny widok siatki.
Najpierw upewnij się, że wszystkie elementy HTML mają box-sizingwłaściwość ustawioną na
border-box. Dzięki temu dopełnienie i obramowanie są uwzględnione w całkowitej szerokości i wysokości elementów.
Dodaj następujący kod w swoim CSS:
* {
box-sizing: border-box;
}
Przeczytaj więcej o box-sizingwłaściwości w naszym rozdziale CSS Box Sizing .
Poniższy przykład przedstawia prostą responsywną stronę internetową z dwiema kolumnami:
Przykład
.menu {
width: 25%;
float: left;
}
.main {
width: 75%;
float: left;
}
Powyższy przykład jest w porządku, jeśli strona internetowa zawiera tylko dwie kolumny.
Chcemy jednak użyć responsywnego widoku siatki z 12 kolumnami, aby mieć większą kontrolę nad stroną internetową.
Najpierw musimy obliczyć procent dla jednej kolumny: 100% / 12 kolumn = 8,33%.
Następnie tworzymy po jednej klasie dla każdej z 12 kolumn class="col-"oraz liczbę określającą, ile kolumn powinna obejmować sekcja:
CSS:
.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%;}
Wszystkie te kolumny powinny unosić się w lewo i mieć dopełnienie 15px:
CSS:
[class*="col-"] {
float: left;
padding: 15px;
border: 1px solid red;
}
Każdy rząd powinien być owinięty w <div>. Liczba kolumn w wierszu powinna zawsze wynosić 12:
HTML:
<div class="row">
<div class="col-3">...</div> <!-- 25% -->
<div class="col-9">...</div> <!-- 75% -->
</div>
Kolumny wewnątrz wiersza są wszystkie unoszące się w lewo i dlatego są usuwane z przepływu strony, a inne elementy zostaną umieszczone tak, jakby kolumny nie istniały. Aby temu zapobiec, dodamy styl, który oczyszcza przepływ:
CSS:
.row::after {
content: "";
clear: both;
display: table;
}
Chcemy również dodać kilka stylów i kolorów, aby wyglądało lepiej:
Przykład
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;
}
Zauważ , że strona internetowa w przykładzie nie wygląda dobrze, gdy zmienisz rozmiar okna przeglądarki do bardzo małej szerokości. W następnym rozdziale dowiesz się, jak to naprawić.