Responsivt webbdesign - Mediafrågor
- Föregående sida RWD rutnätsvy
- Nästa sida RWD bild
Vad är mediaquery?
Mediaquery är en CSS-teknik som introducerades i CSS3.
Används endast när specifika villkor uppfylls @media Regler för att hänvisa till CSS-attributblock.
Exempel
Om webbläsarfönstret är 600px eller mindre, ska bakgrundsfärgen vara ljusblå:
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
Lägg till brytpunkter
I en tidigare del av denna tutorial skapade vi en webbsida med rader och kolumner, men denna responsiva webbsida såg dåligt ut på små skärmar.
Mediaquery kan hjälpa dig. Vi kan lägga till en brytpunkt där vissa delar av designen beter sig annorlunda på varje sida av brytpunkten.
Dator
Smartphone
Lägg till en brytpunkt vid 768px med mediaquery:
Exempel
När skärmen (webbläsarfönstret) är mindre än 768px, bör varje kolumns bredd vara 100%:
/* För skrivbordsenheter: */
.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) {
/* För mobiler: */
[class*="col-"] {
width: 100%;
}
}
Alltid mobilt först design
Mobilt först (Mobile First) innebär att vi designar för mobila enheter innan vi designar för datorer eller andra enheter (detta gör att sidan laddas snabbare på mindre enheter).
Det innebär att vi måste göra några förbättringar i CSS.
När bredden är mindre än 768px, bör vi modifiera designen istället för att ändra bredden. Vi har gjort detta med en 'mobilt först' design:
Exempel
/* För mobiler: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 768px) {
/* För datorer: */
.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%;}
}
En annan brytpunkt
Du kan lägga till hur många brytpunkter du vill.
Vi kommer också att lägga till en brytpunkt mellan tablet och smartphone.
Dator
Tablet
Smartphone
För detta har vi lagt till en mediaquery (vid 600 pixlar) och lagt till ett nytt sett med klasser för enheter som är större än 600 pixlar men mindre än 768 pixlar:
Exempel
Observera att de två klasserna är nästan identiska, den enda skillnaden är namnet (col- och col-s-):
/* För mobiler: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 600px) {
/* För plattor: */
.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) {
/* För datorer: */
.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%;}
}
Det verkar konstigt att ha två lika klasser, men det ger oss chansen att använda HTML för att bestämma vad som händer med kolumnerna vid varje brytpunkt:
HTML-exempel
För stationära datorer:
Det första och det tredje avsnitten kommer att korsa 3 kolumner. Mitten kommer att korsa 6 kolumner.
För plattor:
Det första avsnittet kommer att korsa 3 kolumner, det andra avsnittet kommer att korsa 9 kolumner, det tredje avsnittet kommer att visas under de två första avsnitten och kommer att korsa 12 kolumner:
<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>
Typiska enhetsbreakpoints
Det finns oändligt många skärmar och enheter med olika höjd och bredd, så det är svårt att skapa exakta breakpoints för varje enhet. För enkelhetens skull kan du rikta dig mot dessa fem grupper:
Exempel
/* Ytterst små enheter (telefoner, 600px och lägre) */
@media only screen and (max-width: 600px) {...}
/* Lilla enheter (vertikala surfplattor och stora telefoner, 600 pixlar och högre) */
@media only screen and (min-width: 600px) {...}
/* Medelstora enheter (horisontella surfplattor, 768 pixlar och högre) */
@media only screen and (min-width: 768px) {...}
/* Stora enheter (bärbara datorer/stationära datorer, 992px och högre) */
@media only screen and (min-width: 992px) {...}
/* Överstora enheter (stora bärbara datorer och stationära datorer, 1200px och högre) */
@media only screen and (min-width: 1200px) {...}
Orientering: Porträtt / Landskap
Mediaqueries kan också användas för att ändra sidans layout baserat på webbläsarens orientering.
Du kan ställa in ett antal CSS-attribut som endast tillämpas när bredden på webbläsarfönstret är större än dess höjd, det så kallade 'landscape'-läget:
Exempel
Om orienteringen är landskapsläge, kommer webbsidans bakgrund att vara ljusblå:
@media only screen and (orientation: landscape) {
body {
background-color: lightblue;
}
}
Göm element med mediaquery
En annan vanlig användning av mediaqueries är att gömma element på olika skärmdimensioner:
Exempel
/* Om skärmdimensionen är 600 pixlar eller mindre, göm detta element */
@media only screen and (max-width: 600px) {
div.example {
display: none;
}
}
Ändra fontstorlek med mediaquery
Du kan också använda mediaqueries för att ändra elementets fontstorlek på olika skärmdimensioner:
Exempel
/* Om skärmdimensionen är 601px eller större, sätt innehållets font-size till 80px */
@media only screen and (min-width: 601px) {}}
div.example {
font-size: 80px;
}
}
/* Om skärmdimensionen är 600px eller mindre, sätt <div> font-size till 30px */
@media only screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
}
CSS @media referenshandbok
För en fullständig översikt över alla media typer och egenskaper/uttryck, se Se @media-regeln i CSS referenshandboken.
- Föregående sida RWD rutnätsvy
- Nästa sida RWD bild
