CSS Medianauha - Esimerkki
- Edellinen sivu CSS medianykytykset
- Seuraava sivu RWD esittely
CSS Medianauha - Lisää esimerkkejä
Tarkastellaan lisää medianauhojen esimerkkejä.
Medianauha on suosittu teknologia, jota käytetään mukautettujen tyylejäsiirtojen lähettämiseen eri laitteille.
Tässä on yksinkertainen esimerkki, jossa muutetaan eri laitteiden taustaväriä:
Esimerkki
/* Aseta bodyn taustaväri ruskeaksi */
body {
background-color: tan;
}
/* Aseta taustaväri siniseksi alle tai yhtä suureksi 992 pikselin näytöllä */
@media screen and (max-width: 992px) {
body {
background-color: blue;
}
}
/* Aseta taustaväri olibrun väriseksi 600 pikselin tai pienemmällä näytöllä */
@media screen and (max-width: 600px) {
body {
background-color: olive;
}
}
Haluatko tietää, miksi käytämme tarkasti 992px ja 600px -arvoja? Ne ovat sitä, mitä kutsomme laitteiden 'perinteisiksi katkaisukohtiksi' (typical breakpoints). Voit tarkastella niitä meidän Vastauskykyinen Web-suunnittelu - Ohjeet Opas perinteisistä katkaisukohtia koskevasta tiedosta.
Valikon media query
Tässä esimerkissä käytämme media querya luodaksemme responsiivisen navigaatiomenun, joka muuttuu eri näyttökokojen mukaan.
Suuri näyttö:
Pieni näyttö:
Esimerkki
/* Navbar-kontti */
.topnav {
overflow: hidden;
background-color: #333;
}
/* Navbar-linkki */
.topnav a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Leveys 600 pikseliä tai pienempi, aseta valikkolinkit riveihin, ei rinnakkain */
@media screen and (max-width: 600px) {
.topnav a {
float: none;
width: 100%;
}
}
Sarakkeiden media query
Media queryn yleinen käyttötapa on luoda joustava asettelu. Tässä esimerkissä luomme asetelman, joka muuttuu neljästä, kahdesta ja täysileveys sarakkeista riippuen eri näyttökokojen mukaan:
Suuri näyttö:
Keskinen näyttö:
Pieni näyttö:
Esimerkki
/* Luo toisiaan vierekkäiset ja yhtä suuret neljä saraketta */
.column {
float: left;
width: 25%;
}
/* 992px tai pienemmällä näyttöleveys, muuta neljästä sarakkeesta kahteen */
@media screen and (max-width: 992px) {
.column {
width: 50%;
}
}
/* Leveys alle tai yhtä suuri kuin 600 pikseliä, aseta sarakkeet riveihin, ei rinnakkain */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
Vinkki:tämä modernimpi tapa luoda sarakkeiden asettelu on käyttää CSS Flexboxia (katso alla oleva esimerkki). Mutta Internet Explorer 10 ja aikaisemmat versiot eivät tue sitä. Jos tarvitset IE6-10 -tuen, käytä liukuvia (kuten yllä näytetty).
Jos haluat oppia lisää joustavuuslaatikkoyleiskatsauksesta, opettele CSS Flexbox tämä luku.
Jos haluat oppia lisää responsiivisesta Web-suunnittelusta, opettele Vastauskykyinen Web-suunnittelu - Ohjeet.
Esimerkki
/* Joustavuuslaatikon kontti */
.row {
display: flex;
flex-wrap: wrap;
}
/* Luo neljä yhtä suurta saraketta */
.column {
flex: 25%;
padding: 20px;
}
/* 992px tai pienemmällä näyttöleveys, muuta neljästä sarakkeesta kahteen */
@media screen and (max-width: 992px) {
.column {
flex: 50%;
}
}
/* Leveys alle tai yhtä suuri kuin 600 pikseliä, aseta sarakkeet riveihin, ei rinnakkain */
@media screen and (max-width: 600px) {
.row {
flex-direction: column;
}
}
Piilota elementit media queryn avulla
Media queryn toinen yleinen käyttötapa on elementtien piilottaminen eri näyttökokojen mukaan:
Pienillä näytöillä piilottelen.
Esimerkki
/* Jos näytön koko on 600px tai pienempi, piilota tämä elementti */
@media screen and (max-width: 600px) {
div.example {
display: none;
}
}
Muuta fonttikokoa mediahakulla
Voit käyttää mediahakua muuttamaan elementin fonttikokoa eri näytönkoolle.
Muuttuva fonttikoko.
Esimerkki
/* Jos näytön koko ylittää 600 pikseliä, aseta <div>-elementin fonttikoko 80px */
@media screen and (min-width: 600px) {
div.example {
font-size: 80px;
}
}
/* Jos näytön koko on 600px tai pienempi, aseta <div>-elementin fonttikoko 30px */
@media screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
}
Joustava kuvakokoelma
Tässä esimerkissä käytämme mediahakua yhdessä flexboxin kanssa luodaksemme responsiivisen kuvakokoelman:
Esimerkki
Joustava verkkosivusto
Tässä esimerkissä käytämme mediahakua yhdessä flexboxin kanssa luodaksemme responsiivisen verkkosivuston, joka sisältää joustavan valikkojen ja joustavan sisällön.
Esimerkki
Suunta: Kuvaprofiili / Maisema
Mediahakuja voidaan käyttää sivun asettelun muuttamiseen selaimen suunnan mukaan.
Voit asettaa joukon CSS-ominaisuuksia, jotka ovat voimassa vain silloin, kun selaimen ikkunan leveys on suurempi kuin korkeus, eli pystysuuntainen näyttö:
Esimerkki
Jos suunta on vaakataso, käytä vaalean sinistä taustaväriä:
@media only screen and (orientation: landscape) {
body {
background-color: lightblue;
}
}
Minimitilaan maksimitilaan
Voit myös asettaa minimitilan ja maksimitilan ominaisuuksia min-width- ja max-width-ominaisuuksilla.
Esimerkiksi, kun selaimen leveys on 600-900 pikselin välillä, muuta <div>-elementin ulkoasua:
Esimerkki
@media screen and (max-width: 900px) and (min-width: 600px) {
div.example {
font-size: 50px;
padding: 50px;
border: 8px solid black;
background: yellow;
}
}
Käytä lisäarvoa: Alla olevassa esimerkissä lisäämme lisämediahakemuksen olemassa olevaan mediahakuun pilkulla (samankaltainen OR-laskin):
Esimerkki
/* Kun leveys on 600-900 pikselin välillä tai yli 1100 pikseliä - muuta <div>:n ulkoasua */
@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
div.example {
font-size: 50px;
padding: 50px;
border: 8px solid black;
background: yellow;
}
}
CSS @media viittomakirja
Kaikkien media-tyyppien ja ominaisuuksien/expressionien täydellinen yleiskatsaus, katso CSS viittomakirjan @media säännöt.
Vinkki:Lisätietoja vastauskykyisestä Web-suunnittelusta (miten kohdistaa eri laitteisiin ja näyttöihin) ja media-kyselyjen välityksellä, lue Vastauskykyinen Web-suunnittelu - Ohjeet.
- Edellinen sivu CSS medianykytykset
- Seuraava sivu RWD esittely
