Responsiivinen verkkosivun suunnittelu - ruudukkojen näkymä

Mikä on ruudukkojen näkymä?

Monet verkkosivut perustuvat ruudukkojen näkymään (grid-view), mikä tarkoittaa, että sivu on jaettu useisiin sarakkeisiin:

Verkkosivujen suunnittelussa ruudukkojen näkymät ovat erittäin hyödyllisiä. Tämä mahdollistaa elementtien helpomman sijoittamisen sivulle.

Responsiiviset ruudukkojen näkymät ovat yleensä 12 saraketta, kokonaisleveys 100 % ja ne supistuvat ja venyvät, kun selaimen ikkuna muutetaan.

Rakenna responsiivinen ruudukkojen näkymä

Aloitetaan responsiivisen ruudukkojen näkymän rakentaminen.

Varmista ensin, että kaikki HTML-elementit box-sizing ominaisuus asetettu border-boxTämä varmistaa, että elementin kokonaisleveys ja korkeus sisältävät sisätilat ( täyttö ) ja reunat.

Lisää seuraava koodi CSS:hen:

* {
  box-sizing: border-box;
}

Vieraile CSS Box Sizing Lue lisää box-sizing-ominaisuudesta tästä luvusta.

Tässä esimerkissä näytetään yksinkertainen responsiivinen verkkosivu, jossa on kaksi saraketta:

25%
75%

esimerkki

.menu {
  leveys: 25%;
  float: left;
}
.main {
  leveys: 75%;
  float: left;
}

Kokeile itse

Jos sivu sisältää vain kaksi saraketta, yllä oleva esimerkki on hyvä.

Mutta haluamme käyttää 12 sarakkeen reagoivaa ruudukko näkymää, jotta voimme paremmin hallita verkkosivua.

Ensiksi meidän täytyy laskea yhden sarakkeen prosenttiosuus: 100% / 12 saraketta = 8.33%.

Sitten luomme luokan jokaiselle 12 sarakkeen sarakkeelle, eli class="col-" ja numero, joka määrittää tämän osan pitäisi kattaa sarakkeita:

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%;}

Kokeile itse

Kaikki nämä sarakkeet tulisi liikkua vasemmalle jaolla 15px sisäpuolinen marginaali:

CSS:

[class*="col-"] {
  float: left;
  padding: 15px;
  border: 1px solid red;
}

Jokainen rivi tulisi olla <div> Sarakkeiden lukumäärä sisäkkäin on aina 12:

HTML:

<div class="row">
  <div class="col-3">...</div> <!-- 25% -->
  <div class="col-9">...</div> <!-- 75% -->
</div>

Kaikki sarakkeet ovat sisäkkäin ja liikkuvat vasemmalle, joten ne poistuvat sivun virrasta ja sijoittavat muiden elementtien, ikään kuin nämä sarakkeet eivät olisi olemassa. Välttääksemme tämän, lisäämme virran puhdistavan tyylin:

CSS:

.row::after {
  content: "";
  clear: both;
  display: table;
}

haluamme lisätä joitakin tyylejä ja värejä, jotta se näyttää kauniimmalta:

esimerkki

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;
}

Kokeile itse

Huomaa, että kun muutat selaimen ikkunan leveyttä erittäin pieneksi, esimerkissä oleva verkkosivu näyttää epämiellyttävältä. Seuraavassa luvussa opit, miten voit ratkaista tämän ongelman.