CSS medieforespørgsler

CSS2 introducerede medietyper

CSS2 introducerede @media Regler, der gør det muligt at definere forskellige stilregler for forskellige medietyper.

For eksempel: Du kan have en gruppe af stilregler til computerens skærm, en gruppe til printer, en gruppe til håndholdte enheder, og endda en gruppe til tv, osv.

Desværre har disse medietyper, med undtagelse af printmedietypen, aldrig fået omfattende støtte fra enheder.

CSS3 introducerede medieforelæggelser

Medieforelæggelser i CSS3 udvider konceptet med medietyper i CSS2: De søger ikke efter enhedstyper, men fokuserer på enhedens evner.

Medieforelæggelser kan bruges til at kontrollere mange ting, såsom:

  • Vinduesbredden og -højden
  • Enhedens bredde og højde
  • Retning (er tabletten eller mobilen i liggende eller stående tilstand)
  • Opløsning

Brug af medieforelæggelser er en populær teknik til at levere tilpassede stilskemaer til stationære computere, bærbare computere, tablets og mobiltelefoner (f.eks. iPhone og Android-mobiltelefoner)

Browserstøtte

Tal i tabellen angiver fuld støtte @media Første browserversion for reglen.

Egenskab
@media 21.0 9.0 3.5 4.0 9.0

Medieforelæggelsessyntaks

Medieforelæggelser består af en medietype og kan indeholde en eller flere udtryk, der kan fortolkes som true eller false.

@media not|only mediatype and (expressions) {
  CSS-Code;
}

Hvis den angivne medietype matcher enhedstypen for det dokument, der vises, og alle udtrykkene i medieforelæggelsen er true, vil resultatet af forespørgslen være true. Når medieforelæggelsen er true, vil det tilsvarende stilskema eller stilregel blive anvendt, og følge de normale kaskaderegler.

Medmindre du bruger not- eller only-udtrykkene, er medietypen valgfri og implicit all Typer.

Du kan også bruge forskellige stilskemaer til forskellige medier:

<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">

CSS3 medietyper

Værdi Beskrivelse
all Brugt på alle medietyper
print Brugt til printere
screen Brugt på computermonitorer, tablets, smartphones og lignende
speech Brugt af skærmlæsere til at læse siderne højt

En simpel medieforelæggelseseksempel

En måde at bruge medieforelæggelser på er at have en alternativ CSS-sektion inden i stilskemaet.

Følgende eksempel ændrer baggrundsfarven til lysgrøn, når vinduesbredden er 480 pixels eller bredere (hvis vinduesbredden er mindre end 480 pixels, vil baggrundsfarven være pink):

Eksempel

@media screen and (min-width: 480px) {
  body {
    background-color: lightgreen;
  }
}

Prøv det selv

Følgende eksempel viser en menu, der flyder til venstre side af siden, hvis vinduesbredden er 480 pixels eller bredere (hvis vinduesbredden er mindre end 480 pixels, vil menuen være placeret øverst i indholdet):

Eksempel

@media screen and (min-width: 480px) {
  #leftsidebar {width: 200px; float: left;}
  #main {margin-left: 216px;}
}

Prøv det selv

Flere medieforespørgsels eksempler

For flere eksempler på medieforespørgsler, gå til næste side:CSS MQ eksempel.

CSS @media referencer

En fuld oversigt over alle medietyper og egenskaber/udtryk kan findes i vores CSS referencer @media regel.