CSS
Mediaquery's
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:
- De pagina moet op een normaal scherm worden bekeken (geen afgedrukte pagina, projector, enz.).
- 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.
Gebruik op link tag
<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).