CSS Media Queries - Eksempler

CSS Media Queries - Flere eksempler

Lad os se flere eksempler på brug af media queries.

Media queries er en populær teknik til at sende tilpassede stilark til forskellige enheder.

Her er et simpelt eksempel, hvor vi ændrer baggrundsfarven for forskellige enheder:

CSS medieforespørgsel

Eksempel

/* Sæt body's baggrundsfarve til karryfarvet */
body {
  background-color: tan;
}
/* På skærme med 992 pixels eller mindre, sæt baggrundsfarven til blå */
@media screen and (max-width: 992px) {
  body {
    background-color: blue;
  }
}
/* På skærme med 600 pixels eller mindre, sæt baggrundsfarven til oliven */
@media screen and (max-width: 600px) {
  body {
    background-color: olive;
  }
}

Prøv det selv

Vil du vide, hvorfor vi præcist bruger 992px og 600px? De er det, vi kalder enhedens 'typiske afbrydelser' (typical breakpoints). Du kan finde flere eksempler på vores Responsiv Web Design Tutorial Lær mere om typiske afbrydelser i CSS.

Menuens medieforespørgsler

I dette eksempel bruger vi medieforespørgsler til at oprette en responsiv navigationsmenu, der varierer afhængigt af forskellige skærmstørrelser.

Stor skærm:

Lille skærm:

Eksempel

/* Navbar container */
.topnav {
  overflow: hidden;
  background-color: #333;
}
/* Navbar links */
.topnav a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/* På skærme med bredde på 600 pixels eller mindre, gør menuens links overlappe i stedet for at stå ved siden af hinanden */
@media screen and (max-width: 600px) {
  .topnav a {
    float: none;
    width: 100%;
  }
}

Prøv det selv

Kolonnernes medieforespørgsler

En almindelig anvendelse af medieforespørgsler er at oprette elastiske layouts. I dette eksempel opretter vi et layout, der ændrer sig mellem fire kolonner, to kolonner og fuld bredde kolonner afhængigt af forskellige skærmstørrelser:

Stor skærm:

Mellemstor skærm:

Lille skærm:

Eksempel

/* Opret fire ens kolonner, der ligger ved siden af hinanden */
.column {
  float: left;
  width: 25%;
}
/* På skærme med bredde på 992px eller mindre, ændres fra fire kolonner til to kolonner */
@media screen and (max-width: 992px) {
  .column {
    width: 50%;
  }
}
/* På skærme med bredde mindre end eller lig med 600 pixels, gør kolonnerne overlappe i stedet for at stå ved siden af hinanden */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

Prøv det selv

Tips:den mere moderne metode til at oprette kolonne layouts er ved at bruge CSS Flexbox (se eksemplerne nedenfor). Men, Internet Explorer 10 og ældre versioner understøtter ikke det. Hvis du har brug for at understøtte IE6-10, så brug flydende (som vist ovenfor).

Hvis du vil lære mere om modulene for elastisk rammeopsætning, så læs CSS Flexbox kapitel.

Hvis du vil lære mere om responsiv webdesign, så læs vores Responsiv Web Design Tutorial.

Eksempel

/* Container for det elastiske bokslayout */
.row {
  display: flex;
  flex-wrap: wrap;
}
/* Opret fire ens kolonner */
.column {
  flex: 25%;
  padding: 20px;
}
/* På skærme med bredde på 992px eller mindre, ændres fra fire kolonner til to kolonner */
@media screen and (max-width: 992px) {
  .column {
    flex: 50%;
  }
}
/* På skærme med bredde mindre end eller lig med 600 pixels, gør kolonnerne overlappe i stedet for at stå ved siden af hinanden */
@media screen and (max-width: 600px) {
  .row {
    flex-direction: column;
  }
}

Prøv det selv

Skjul elementer med medieforespørgsler

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

Jeg vil skjule dette på små skærme.

Eksempel

/* Hvis skærmstørrelsen er 600 pixel eller mindre, skjul dette element */
@media 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 skriftstørrelsen på elementer på forskellige skærmstørrelser:

Variabel skriftstørrelse

Eksempel

/* Hvis skærmstørrelsen er større end 600 pixel, sæt <div>'s skriftstørrelse til 80 pixel */
@media screen and (min-width: 600px) {
  div.example {
    font-size: 80px;
  }
}
/* Hvis skærmstørrelsen er 600px eller mindre, sæt <div>'s skriftstørrelse til 30px */
@media screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }
}

Prøv det selv

Fleksibelt billedgalleri

I dette eksempel bruger vi medieforespørgsler sammen med flexbox til at skabe en responsiv billedgalleri:

Eksempel

Prøv det selv

Fleksibel hjemmeside

I dette eksempel bruger vi medieforespørgsler sammen med flexbox til at skabe en responsiv hjemmeside med fleksibel navigationslinje og fleksibelt indhold.

Eksempel

Prøv det selv

Orientering: Portræt / Landskab

Medieforespørgsler kan også bruges til at ændre layoutet af siden baseret på browserens orientering.

Du kan indstille en række CSS-egenskaber, der kun gælder, når browservinduets bredde er større end højden, hvilket kaldes liggende skærm:

Eksempel

Brug hvid blå baggrundsfarve, hvis orienteringen er i liggende tilstand:

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

Prøv det selv

Mindste bredde til maksimal bredde

Du kan også bruge max-width og min-width-egenskaberne til at indstille mindste og maksimal bredde.

For eksempel, når browserens bredde er mellem 600 og 900 pixel, ændr <div>-elementets udseende:

Eksempel

@media screen and (max-width: 900px) and (min-width: 600px) {
  div.example {
    font-size: 50px;
    padding: 50px;
    border: 8px solid black;
    background: yellow;
  }
}

Prøv det selv

Brug af værditilføjelse: I det følgende eksempel bruger vi komma (lignende OR-betegnelsen) til at tilføje yderligere medieforespørgsler til eksisterende medieforespørgsler:

Eksempel

/* Når bredden er mellem 600 og 900 pixel eller større end 1100 pixel - ændr <div>'s udseende */
@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;
  }
}

Prøv det selv

CSS @media referansehåndbok

En fullstendig oversikt over alle medietyper og egenskaper/uttrykk, se CSS referanse @media-regel.

Tips:For å lære mer om responsiv Web Design (hvordan tilpasse seg forskjellige enheter og skjermer) og bruk av medieforespørselsbrudd, les vår Responsiv Web Design Tutorial.