Zoeken…


Syntaxis

  • @media [niet | alleen] mediatype en (mediafunctie) {/ * CSS-regels van toepassing * /}

parameters

Parameter Details
mediatype (Optioneel) Dit is het type media. Zou alles binnen het bereik van all naar screen .
not (Optioneel) Past de CSS niet toe voor dit specifieke mediatype en geldt voor al het andere.
media feature Logica om use case voor CSS te identificeren. Opties hieronder beschreven.
Media-functie Details
aspect-ratio Beschrijft de beeldverhouding van het beoogde weergavegebied van het uitvoerapparaat.
color Geeft het aantal bits per kleurcomponent van het uitvoerapparaat aan. Als het apparaat geen kleurapparaat is, is deze waarde nul.
color-index Geeft het aantal vermeldingen in de kleur opzoektabel voor het uitvoerapparaat aan.
grid Bepaalt of het uitvoerapparaat een rasterapparaat of een bitmapapparaat is.
height De functie voor hoogtemedia beschrijft de hoogte van het weergaveoppervlak van het uitvoerapparaat.
max-width CSS is niet van toepassing op een schermbreedte breder dan opgegeven.
min-width CSS is niet van toepassing op een schermbreedte kleiner dan gespecificeerd.
max-height CSS is niet van toepassing op een schermhoogte groter dan opgegeven.
min-height CSS is niet van toepassing op een schermhoogte korter dan opgegeven.
monochrome Geeft het aantal bits per pixel aan op een monochroom (grijswaarden) apparaat.
orientation CSS wordt alleen weergegeven als het apparaat de opgegeven oriëntatie gebruikt. Zie opmerkingen voor meer informatie.
resolution Geeft de resolutie (pixeldichtheid) van het uitvoerapparaat aan.
scan Beschrijft het scanproces van televisie-uitvoerapparaten.
width De functie voor breedtemedia beschrijft de breedte van het weergaveoppervlak van het uitvoerapparaat (zoals de breedte van het documentvenster of de breedte van het paginakader op een printer).
Verouderde functies Details
device-aspect-ratio Deprecated CSS wordt alleen weergegeven op apparaten waarvan de hoogte / breedte-verhouding overeenkomt met de opgegeven verhouding. Dit is een deprecated functie en werkt niet gegarandeerd.
max-device-width Deprecated Hetzelfde als de max-width maar meet de fysieke schermbreedte in plaats van de weergavebreedte van de browser.
min-device-width Deprecated Hetzelfde als min-width maar meet de fysieke schermbreedte in plaats van de weergavebreedte van de browser.
max-device-height Deprecated Hetzelfde als max-height maar meet de fysieke schermbreedte in plaats van de weergavebreedte van de browser.
min-device-height Deprecated Hetzelfde als min-height maar meet de fysieke schermbreedte in plaats van de weergavebreedte van de browser.

Opmerkingen

Mediaquery's worden ondersteund in alle moderne browsers, inclusief Chrome, Firefox, Opera en Internet Explorer 9 en hoger.


Het is belangrijk op te merken dat de functie voor orientation niet beperkt is tot mobiele apparaten. Het is gebaseerd op de breedte en hoogte van de viewport (geen venster of apparaten).

Landschapsmodus is wanneer de breedte van de viewport groter is dan de hoogte van de viewport.

In de portretmodus is de hoogte van de viewport groter dan de breedte van de viewport.

Dit vertaalt zich meestal naar een desktopmonitor die zich in de liggende modus bevindt, maar kan soms ook portret zijn.


In de meeste gevallen zullen mobiele apparaten hun resolutie rapporteren en niet hun werkelijke pixelgrootte, die kan verschillen vanwege de pixeldichtheid. Om hen te dwingen om verslag uit over hun werkelijke pixelgrootte voeg de volgende in je head tag:

<meta name="viewport" content="width=device-width, initial-scale=1">


Basis voorbeeld

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

De bovenstaande mediaquery geeft twee voorwaarden op:

  1. De pagina moet op een normaal scherm worden bekeken (geen afgedrukte pagina, projector, enz.).
  2. De breedte van de weergavepoort van de gebruiker moet minimaal 720 pixels zijn.

Als aan deze voorwaarden wordt voldaan, zijn de stijlen in de mediaquery actief en is de achtergrondkleur van de pagina hemelsblauw.

Mediaquery's worden dynamisch toegepast. Als bij het laden van de pagina wordt voldaan aan de voorwaarden die zijn opgegeven in de mediaquery, wordt de CSS toegepast, maar wordt deze onmiddellijk uitgeschakeld als niet meer aan de voorwaarden wordt voldaan. Omgekeerd, als aanvankelijk niet aan de voorwaarden is voldaan, wordt de CSS pas toegepast als aan de opgegeven voorwaarden is voldaan.

In ons voorbeeld, als de breedte van de weergavepoort van de gebruiker aanvankelijk groter is dan 720 pixels, maar de breedte van de browser verkleint, wordt de achtergrondkleur niet meer hemelsblauw zodra de gebruiker de weergavepoort heeft verkleind naar minder dan 720 pixels in breedte.

<link rel="stylesheet" media="min-width: 600px" href="example.css" />

Deze stylesheet wordt nog steeds gedownload, maar wordt alleen toegepast op apparaten met een schermbreedte van meer dan 600 px.

mediatype

Mediaquery's hebben een optionele parameter mediatype . Deze parameter wordt direct achter de @media aangifte ( @media mediatype ) geplaatst, bijvoorbeeld:

@media print {
    html {
        background-color: white;
    }
}

De bovenstaande CSS-code geeft het DOM HTML element een witte achtergrondkleur wanneer het wordt afgedrukt.

Het mediatype parameter heeft een optionele not of only voorvoegsel dat de stijlen van toepassing zijn op alles behalve de opgegeven mediatype of alleen het opgegeven mediatype, respectievelijk. Het volgende codevoorbeeld past bijvoorbeeld de stijl toe op elk mediatype behalve print .

@media not print {
    html {
        background-color: green;
    }
}

En op dezelfde manier kan dit worden gebruikt om het alleen op het scherm weer te geven:

@media only screen {
    .fadeInEffects {
        display: block;
    }
}

De lijst met mediatype kan beter worden begrepen met de volgende tabel:

Mediatype Beschrijving
all Toepassen op alle apparaten
screen Standaardcomputers
print Printers in het algemeen. Gebruikt om printversies van websites te stijlen
handheld PDA's, mobiele telefoons en draagbare apparaten met een klein scherm
projection Voor geprojecteerde presentatie, bijvoorbeeld projectoren
aural Spraaksystemen
braille Braille tactiele apparaten
embossed Brailleprinters met wisselpagina
tv Apparaten van het televisietype
tty Apparaten met een karakterrooster met vaste toonhoogte. Terminals, portables.

Mediaquery's gebruiken om verschillende schermformaten te targeten

Vaak omvat responsief webontwerp mediaquery's, dit zijn CSS-blokken die alleen worden uitgevoerd als aan een voorwaarde is voldaan. Dit is handig voor responsief webontwerp omdat u mediaquery's kunt gebruiken om verschillende CSS-stijlen op te geven voor de mobiele versie van uw website versus de desktopversie.

@media only screen and (min-width: 300px) and (max-width: 767px) {
    .site-title {
        font-size: 80%;
    }

    /* Styles in this block are only applied if the screen size is atleast 300px wide, but no more than 767px */
}

@media only screen and (min-width: 768px) and (max-width: 1023px) {
    .site-title {
        font-size: 90%;
    }

    /* Styles in this block are only applied if the screen size is atleast 768px wide, but no more than 1023px */
}

@media only screen and (min-width: 1024px) {
    .site-title {
        font-size: 120%;
    }

    /* Styles in this block are only applied if the screen size is over 1024px wide. */
}

Breedte versus Viewport

Wanneer we "breedte" gebruiken met mediaquery's, is het belangrijk om de metatag correct in te stellen. De standaard metatag ziet er zo uit en moet in de tag <head> worden geplaatst.

<meta name="viewport" content="width=device-width,initial-scale=1">

Waarom is dit belangrijk?

Gebaseerd op MDN's definitie "breedte" is

De functie voor breedtemedia beschrijft de breedte van het weergaveoppervlak van het uitvoerapparaat (zoals de breedte van het documentvenster of de breedte van het paginakader op een printer).

Wat betekent dat?

Beeldpoort is de breedte van het apparaat zelf. Als uw schermresolutie zegt dat de resolutie 1280 x 720 is, is de breedte van uw view-poort "1280px".

Vaker wijzen veel apparaten verschillende pixels toe om één pixel weer te geven. Voor een voorbeeld heeft iPhone 6 Plus een resolutie van 1242 x 2208. Maar de werkelijke viewport-breedte en viewport-hoogte is 414 x 736. Dat betekent dat 3 pixels worden gebruikt om 1 pixel te maken.

Maar als u de meta correct hebt ingesteld, probeert deze uw webpagina weer te geven met de oorspronkelijke resolutie, wat resulteert in een uitgezoomde weergave (kleinere teksten en afbeeldingen).

Mediaquery's voor Retina- en niet-Retina-schermen

Hoewel dit alleen werkt voor op WebKit gebaseerde browsers, is dit nuttig:

/* ----------- Non-Retina Screens ----------- */
@media screen 
  and (min-width: 1200px) 
  and (max-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1) { 
}

/* ----------- Retina Screens ----------- */
@media screen 
  and (min-width: 1200px) 
  and (max-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (min-resolution: 192dpi) { 
}

Achtergrond informatie

Er zijn twee soorten pixels in het scherm. Een daarvan is de logische pixels en de andere is de fysieke pixels. Meestal blijven de fysieke pixels altijd hetzelfde, omdat deze voor alle weergaveapparaten hetzelfde zijn. De logische pixels veranderen op basis van de resolutie van de apparaten om pixels van hogere kwaliteit weer te geven. De pixelverhouding van het apparaat is de verhouding tussen fysieke pixels en logische pixels. De MacBook Pro Retina, iPhone 4 en hoger rapporteren bijvoorbeeld een apparaatpixelverhouding van 2, omdat de fysieke lineaire resolutie het dubbele is van de logische resolutie.

De reden waarom dit alleen werkt met op WebKit gebaseerde browsers is vanwege:

  • Het leveranciersvoorvoegsel -webkit- vóór de regel.
  • Dit is niet geïmplementeerd in andere motoren dan WebKit en Blink.

Terminologie en structuur

Met mediaquery's kunt u CSS-regels toepassen op basis van het type apparaat / media (bijv. Scherm, print of handheld), het mediatype genaamd, aanvullende aspecten van het apparaat worden beschreven met mediafuncties zoals de beschikbaarheid van kleuren of viewport-afmetingen.

Algemene structuur van een mediaquery

@media [...] {
    /* One or more CSS rules to apply when the query is satisfied */
}

Een mediaquery met een mediatype

@media print {
    /* One or more CSS rules to apply when the query is satisfied */
}

Een mediaquery met een mediatype en een mediafunctie

@media screen and (max-width: 600px) {
    /* One or more CSS rules to apply when the query is satisfied */
}

Een mediaquery met een media-functie (en een impliciet mediatype van "alle")

@media (orientation: portrait) {        
    /* One or more CSS rules to apply when the query is satisfied */
}

Mediaquery's en IE8

Mediaquery's worden helemaal niet ondersteund in IE8 en lager.


Een op JavaScript gebaseerde oplossing

Om ondersteuning voor IE8 toe te voegen, kunt u een van de verschillende JS-oplossingen gebruiken. Reageren kan bijvoorbeeld worden toegevoegd om alleen mediaqueryondersteuning voor IE8 toe te voegen met de volgende code:

<!--[if lt IE 9]>
<script 
   src="respond.min.js">
</script>
<![endif]-->

CSS Mediaqueries is een andere bibliotheek die hetzelfde doet. De code voor het toevoegen van die bibliotheek aan uw HTML zou identiek zijn:

<!--[if lt IE 9]>
<script 
   src="css3-mediaqueries.js">
</script>
<![endif]-->

Het alternatief

Als je niet van een op JS gebaseerde oplossing houdt, zou je ook moeten overwegen om een stylesheet met alleen IE <9 toe te voegen, waarin je je styling specifiek voor IE <9 aanpast. Daarvoor moet u de volgende HTML aan uw code toevoegen:

<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" media="all" href="style-ielt9.css"/>
<![endif]-->

Notitie :

Technisch gezien is het nog een alternatief: CSS-hacks gebruiken om IE <9 te targeten. Het heeft dezelfde impact als een stylesheet met alleen IE <9, maar daarvoor hebt u geen aparte stylesheet nodig. Ik raad deze optie echter niet aan, omdat deze ongeldige CSS-code produceren (wat slechts een van de vele redenen is waarom het gebruik van CSS-hacks tegenwoordig algemeen wordt afgekeurd).



Modified text is an extract of the original Stack Overflow Documentation
Licentie onder CC BY-SA 3.0
Niet aangesloten bij Stack Overflow