Responsiivinen verkkosivun suunnittelu - Media-kyselyt

Mitä media kyselylause on?

Media kyselylause on CSS3:ssa mukana tuoma CSS-tekniikka.

Se käytetään vain, kun täyttyy tiettyjä ehtoja @media Säännöt CSS-ominaisuuksien lohkon viittaamiseen.

Esimerkki

Jos selainikkuna on 600px tai pienempi, taustaväri on vaaleansininen:

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

Kokeile itse

Lisää väli

Tässä opetusohjelmassa aikaisemmin teimme verkkosivun, joka sisälsi rivejä ja sarakkeita, mutta tämä vastauskehyssivu näytti huonolta pienillä näytöillä.

Media kyselylause auttaa sinua. Voimme lisätä yhden välin, jossa suunnittelun jotkin osat käyttäytyvät eri tavoin välin molemmin puolin.


Työpöytäkoneet

Mobiililaitteet

Lisää väli 768px:een media kyselylauseella:

Esimerkki

Kun näyttö (selainikkuna) on alle 768px, jokaisen sarakkeen leveys tulisi olla 100%:

/* Työpöytäkoneita varten: */
.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%;}
@media only screen and (max-width: 768px) {
  /* Puhelimille: */
  [class*="col-"] {
    width: 100%;
  }
}

Kokeile itse

Aina ensin mobiili -suunnittelu

Mobiili ensin (Mobile First) tarkoittaa, että ennen kuin suunnittelemme työpöytäkoneita tai muita laitteita, suunnittelemme ensin mobiililaitteita (tämä tekee sivusta nopeammin näkyvän pienemmillä laitteilla).

Tämä tarkoittaa, että meidän täytyy tehdä joitakin parannuksia CSS:ssä.

Kun leveys on alle 768px, meidän tulisi muuttaa suunnittelua eikä leveyttä. Näin me suunnittelimme 'ensin mobiili' -lähestymistavan:

Esimerkki

/* Puhelimille: */
[class*="col-"] {
  width: 100%;
}
@media only screen and (min-width: 768px) {
  /* Pöytätietokoneille: */
  .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

Toinen väli

Voit lisätä minkä tahansa määrän välejä.

Asetamme myös yhden väliään puhelimelle ja tabletille.


Työpöytäkoneet

Tabletit

Mobiililaitteet

Tästä syystä lisäsimme median kyselylauseen (600 kuvapikseliä varten) ja lisäsimme uuden luokkaryhmän yli 600 kuvapikselin (mutta alle 768 kuvapikselin) laitteille:

Esimerkki

Huomaa, että kaksi luokkaa ovat lähes identtisiä, ainoa ero on nimi (col- ja col-s-):

/* Puhelimille: */
[class*="col-"] {
  width: 100%;
}
@media only screen and (min-width: 600px) {
  /* Tabletteille: */
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
  /* Pöytätietokoneille: */
  .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%;}
}

Kaksi samanlaista luokkaa vaikuttaa hieman omituiselta, mutta se antaa meille mahdollisuuden käyttää HTML:ää päättääksesi, mitä tapahtuu sarakkeille jokaisessa leikkauspisteessä:

HTML-esimerkki

Tietokoneille:

Ensimmäinen ja kolmas osa kattavat 3 saraketta. Keskimmäinen osa kattaa 6 saraketta.

Tabletteille:

Ensimmäinen osa kattaa 3 saraketta, toinen osa kattaa 9 saraketta, kolmas osa näytetään ensimmäisten kahden osan alla ja se kattaa 12 saraketta:

<div class="row">
  <div class="col-3 col-s-3">...</div>
  <div class="col-6 col-s-9">...</div>
  <div class="col-3 col-s-12">...</div>
</div>

Kokeile itse

Tavalliset laiteleikkauspisteet

Eri korkeuden ja leveyden omaavat näytöt ja laitteet ovat lukemattomia, joten on vaikeaa luoda tarkkoja leikkauspisteitä jokaiselle laitteelle. Yksinkertaista varten voit keskittyä näihin viiteen ryhmään:

Esimerkki

/* Erittäin pienet laitteet (puhelin, 600px tai pienempi) */
@media only screen and (max-width: 600px) {...} 
/* Pienet laitteet (pystysuuntainen tabletti ja suuret puhelimet, 600 pikseliä tai suurempi) */
@media only screen and (min-width: 600px) {...} 
/* Keskituetut laitteet (vaakasuuntainen tabletti, 768 pikseliä tai suurempi) */
@media only screen and (min-width: 768px) {...} 
/* Suuret laitteet (kannettavat tietokoneet/pöytäkoneet, 992px tai suurempi) */
@media only screen and (min-width: 992px) {...} 
/* Erikoislaitteet (suuret kannettavat tietokoneet ja pöytäkoneet, 1200px tai suurempi) */
@media only screen and (min-width: 1200px) {...}

Kokeile itse

Suunta: Portaatti / Maisema

Media-kyselyjä voidaan käyttää myös sivun rakenteen muuttamiseen sen perusteella, mihin suuntaan selain on suunnattu.

Voit asettaa joukon CSS-ominaisuuksia, jotka ovat käytössä vain silloin, kun selaimen ikkunan leveys on suurempi kuin korkeus, eli niin sanotussa 'vaakasivussa':

Esimerkki

Jos näyttösuunta on vaakasuuntainen (landscape mode), sivun tausta on vaaleansininen:

@media only screen and (orientation: landscape) {
  body {
    background-color: lightblue;
  }
}

Kokeile itse

Piilota elementti media-kyselyllä

Toinen yleinen käyttötapa media-kyselyille on piilottaa elementtejä eri näyttökootiin:

Esimerkki

/* Jos näyttökokoa on 600 pikseliä tai pienempi, piilota tämä elementti */
@media only screen and (max-width: 600px) {
  div.example {
    display: none;
  }
}

Kokeile itse

Muokkaa fonttikokoa media-kyselyllä

Voit käyttää myös media-kyselyjä muokata elementtien fonttikokoa eri näyttökootiin:

Esimerkki

/* Jos näyttökokoa on 601px tai suurempi, aseta <div> elementin font-size arvoksi 80px */
@media only screen and (min-width: 601px) {}}
  div.example {
    font-size: 80px;
  }
}
/* Jos näyttökokonaisuus on 600px tai pienempi, aseta <div>:n font-size 30px */
@media only screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }
}

Kokeile itse

CSS @media viittausoppikirja

Kaikkien media-tyyppien ja ominaisuuksien/ilmentymien täydellinen yleiskatsaus löytyy CSS viittausoppikirjassa @media säännöt.