Responsivt websted design - Medieforespørgsler

Hvad er medieforespørgsler?

Medieforespørgsler er en CSS-teknologi, der blev introduceret i CSS3.

Bruges kun, når specifikke betingelser er opfyldt @media Regler til at referere til CSS-attributblokke.

Eksempel

Hvis browservinduet er 600px eller mindre, skal baggrundsfarven være lyseblå:

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

Prøv det selv

Tilføj skillelinje

I dette tutorial tidligere lavede vi en hjemmeside med rækker og kolonner, men denne responsive hjemmeside så ikke godt ud på små skærme.

Medieforespørgsler kan hjælpe dig. Vi kan tilføje en skillelinje, hvor visse dele af designet vises forskelligt på hver side af skillelinjen.


Bordcomputer

Mobiltelefon

Tilføj en skillelinje ved 768px med medieforespørgsler:

Eksempel

Når skærmen (browservinduet) er mindre end 768px, skal bredden for hver kolonne være 100%:

/* Til desktop-enheder: */
.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) {
  /* Til mobile enheder: */
  [class*="col-"] {
    width: 100%;
  }
}

Prøv det selv

Altid mobile first design

Mobile first (Mobile First) betyder, at vi prioriterer design til mobile enheder, før vi designer til skrivebord eller andre enheder (dette gør, at siden vises hurtigere på mindre enheder).

Dette betyder, at vi skal foretage nogle forbedringer i CSS.

Når bredden er mindre end 768px, skal vi ændre designet i stedet for at ændre bredden. Vi har gjort dette med en 'mobile first' designstrategi:

Eksempel

/* Til mobile enheder: */
[class*="col-"] {
  width: 100%;
}
@media only screen and (min-width: 768px) {
  /* Til desktop: */
  .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%;}
}

Prøv det selv

En anden skillelinje

Du kan tilføje så mange skillelinjer, som du vil.

Vi vil også indsætte en skillelinje mellem tablet og mobiltelefon.


Bordcomputer

Tablet

Mobiltelefon

Derfor har vi tilføjet en medieforespørgsel (på 600 pixel) og tilføjet et nyt sæt klasser til enheder med mere end 600 pixel, men mindre end 768 pixel:

Eksempel

Bemærk, at de to sæt klasser er næsten ens, den eneste forskel er navnet (col- og col-s-):

/* Til mobile enheder: */
[class*="col-"] {
  width: 100%;
}
@media only screen and (min-width: 600px) {
  /* Til tabletter: */
  .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) {
  /* Til desktop: */
  .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 virker lidt underligt med to sets af ens klasser, men det giver os mulighed for at bruge HTML til at bestemme, hvad der sker med kolonnerne ved hver skærmstørrelse:

HTML eksempel

For stationære computere:

Den første og tredje del vil strække sig over 3 kolonner. Mellemområdet vil strække sig over 6 kolonner.

For tabletter:

Den første del vil strække sig over 3 kolonner, den anden del vil strække sig over 9 kolonner, og den tredje del vil vises under de to første dele og strække sig over 12 kolonner:

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

Prøv det selv

Typiske enhedsbrudpunkter

Der er utallige skærme og enheder med forskellige højder og bredder, så det er svært at skabe præcise brudpunkter for hver enhed. For enkelhedens skyld kan du målrette disse fem grupper:

Eksempel

/* Ekstremt små enheder (telefoner, 600px og mindre) */
@media only screen and (max-width: 600px) {...} 
/* Små enheder (portræt tabletter og store telefoner, 600 pixel og mere) */
@media only screen and (min-width: 600px) {...} 
/* Mellemstore enheder (lågskærms tabletter, 768 pixel og mere) */
@media only screen and (min-width: 768px) {...} 
/* Store enheder (bærbare computere/stationære computere, 992px og mere) */
@media only screen and (min-width: 992px) {...} 
/* Ekstremt store enheder (store bærbare computere og stationære computere, 1200px og mere) */
@media only screen and (min-width: 1200px) {...}

Prøv det selv

Orientering: Portræt / Landskab

Medieforespørgsler kan også bruges til at ændre sidens layout baseret på browserens orientering.

Du kan indstille en gruppe CSS-ejenskaber, der kun gælder, når browservinduets bredde er større end højden, hvilket kaldes 'lågskærm' orientering:

Eksempel

Hvis orienteringen er landskabsmode, skal websidens baggrund være lyseblå:

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

Prøv det selv

Skjul element med medieforespørgsel

En anden almindelig anvendelse af medieforespørgsler er at skjule elementer på forskellige skærmstørrelser:

Eksempel

/* Hvis skærmstørrelsen er 600 pixel eller mindre, skal elementet skjules */
@media only screen and (max-width: 600px) {
  div.example {
    display: none;
  }
}

Prøv det selv

Ændr skriftstørrelse med medieforespørgsel

Du kan også bruge medieforespørgsler til at ændre elementets skriftstørrelse på forskellige skærmstørrelser:

Eksempel

/* Hvis skærmstørrelsen er 601px eller større, skal <div> font-size sættes til 80px */
@media only screen and (min-width: 601px) {}}
  div.example {
    font-size: 80px;
  }
}
/* Hvis skærmskærmens størrelse er 600px eller mindre, skal font-size for <div> sættes til 30px */
@media only screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }
}

Prøv det selv

CSS @media referencemanual

For en fuldstændig oversigt over alle medietyper og egenskaber/udtryk, se Se @media regel i CSS referencemanualen.