CSS => Mediefrågor

Syntax

@media [inte | endast] mediatype och (mediefunktion) {/ * CSS-regler för att tillämpa * /}

parametrar

Parameter	detaljer
`mediatype`	(Valfritt) Detta är typen av media. Kan vara något i intervallet `all` till `screen` .
`not`	(Valfritt) Tillämpar inte CSS för den här medietypen och gäller för allt annat.
`media feature`	Logik för att identifiera användningsfall för CSS. Alternativ beskrivna nedan.
Mediefunktion	detaljer
`aspect-ratio`	Beskriver bildförhållandet för det riktade visningsområdet för utgångsenheten.
`color`	Anger antalet bitar per färgkomponent för utmatningsenheten. Om enheten inte är en färgenhet är detta värde noll.
`color-index`	Anger antalet poster i färguppslagstabellen för utgångsenheten.
`grid`	Bestämmer om utgångsenheten är en rutnätsenhet eller en bitmappsenhet.
`height`	Höjdmediafunktionen beskriver höjden på utmatningsenhetens återgivningsyta.
`max-width`	CSS kommer inte att tillämpas på en skärmbredd som är bredare än angiven.
`min-width`	CSS kommer inte att tillämpas på en skärmbredd som är smalare än angiven.
`max-height`	CSS kommer inte att tillämpas på en skärmhöjd högre än angiven.
`min-height`	CSS kommer inte att tillämpas på en skärmhöjd som är kortare än specificerat.
`monochrome`	Anger antalet bitar per pixel på en monokrom enhet (gråskala).
`orientation`	CSS visas bara om enheten använder specificerad orientering. Se anmärkningar för mer information.
`resolution`	Indikerar upplösningen (pixeltätheten) på utgångsenheten.
`scan`	Beskriver skanningsprocessen för TV-utgångsenheter.
`width`	Breddmediafunktionen beskriver bredden på utmatningsenhetens återgivningsyta (till exempel bredden på dokumentfönstret eller bredden på sidrutan på en skrivare).
Avskrivna funktioner	detaljer
`device-aspect-ratio`	`Deprecated` CSS visas bara på enheter vars höjd / breddförhållande matchar det angivna förhållandet. Detta är en `deprecated` funktion och garanteras inte att den fungerar.
`max-device-width`	`Deprecated` Samma som `max-width` men mäter den fysiska skärmbredden snarare än webbläsarens visningsbredd.
`min-device-width`	`Deprecated` Samma som `min-width` men mäter den fysiska skärmbredden snarare än webbläsarens visningsbredd.
`max-device-height`	`Deprecated` Samma som `max-height` men mäter den fysiska skärmbredden snarare än webbläsarens visningsbredd.
`min-device-height`	`Deprecated` Samma som `min-height` men mäter den fysiska skärmbredden snarare än webbläsarens visningsbredd.

Anmärkningar

Mediafrågor stöds i alla moderna webbläsare, inklusive Chrome, Firefox, Opera och Internet Explorer 9 och senare.

Det är viktigt att notera att orientation inte är begränsad till mobila enheter. Det är baserat på visningsportens bredd och höjd (inte fönster eller enheter).

Liggande läge är när visningsbredden är större än utsikthöjden.

Porträttläge är när visningsportens höjd är större än visningsbredden.

Detta innebär vanligtvis att en stationär skärm befinner sig i liggande läge, men kan ibland vara porträtt.

I de flesta fall kommer mobila enheter att rapportera sin upplösning och inte deras verkliga pixelstorlek som kan skilja sig på grund av pixeltäthet. Att tvinga dem att rapportera deras verkliga pixelstorlek lägga till följande i din head tag:

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

Grundläggande exempel

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

Ovanstående mediefråga anger två villkor:

Sidan måste visas på en normal skärm (inte en tryckt sida, projektor osv.).
Användarens vyport måste vara minst 720 pixlar.

Om dessa villkor är uppfyllda kommer stilarna i mediefrågan att vara aktiva och sidans bakgrundsfärg blir himmelblå.

Mediefrågor tillämpas dynamiskt. Om på sidan laddas de villkor som anges i mediefrågan kommer CSS att tillämpas, men avaktiveras omedelbart om villkoren upphör att uppfylla. Omvänt, om villkoren från början inte är uppfyllda, kommer CSS inte att tillämpas förrän de angivna villkoren är uppfyllda.

I vårt exempel, om användarens vyportbredd initialt är större än 720 pixlar, men användaren krymper webbläsarens bredd, kommer bakgrundsfärgen att upphöra att bli himmelblå så snart användaren har ändrat storlek på visningsporten till mindre än 720 pixlar i bredd.

Använd på länk taggen

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

Detta formatmall laddas fortfarande ned men tillämpas endast på enheter med skärmbredd större än 600 pixlar.

Mediatyp

Mediafrågor har en valfri mediatype . Denna parameter placeras direkt efter @media deklarationen ( @media mediatype ), till exempel:

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

Ovanstående CSS-kod ger DOM HTML elementet en vit bakgrundsfärg när de skrivs ut.

Parametern mediatype har ett valfritt not eller only prefix som kommer att tillämpa stilarna på allt utom den angivna mediatypen respektive endast den angivna medietypen. Till exempel kommer följande kodexempel att använda formatet på alla mediatyper utom print .

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

Och på samma sätt, för att bara visa det bara på skärmen, kan detta användas:

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

Listan över mediatype kan förstås bättre med följande tabell:

Mediatyp	Beskrivning
`all`	Applicera på alla enheter
`screen`	Standarddatorer
`print`	Skrivare i allmänhet. Används för att utforma utskriftsversioner av webbplatser
`handheld`	PDA: er, mobiltelefoner och handhållna enheter med en liten skärm
`projection`	För projicerad presentation, till exempel projektorer
`aural`	Talsystem
`braille`	Braille taktila enheter
`embossed`	Sidade punktskrivare
`tv`	Enheter av tv-typ
`tty`	Enheter med ett teckenraster med fast tonhöjd. Terminaler, portablar.

Använda mediefrågor för att rikta in olika skärmstorlekar

Ofta involverar responsiv webbdesign mediefrågor, som är CSS-block som endast körs om ett villkor är uppfyllt. Detta är användbart för lyhörd webbdesign eftersom du kan använda mediefrågor för att ange olika CSS-stilar för mobilversionen av din webbplats kontra skrivbordsversionen.

@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. */
}

Bredd vs Viewport

När vi använder "bredd" med mediafrågor är det viktigt att ställa in metataggen korrekt. Grundläggande metatagg ser ut så här och det måste läggas in i <head> -taggen.

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

Varför detta är viktigt?

Baserat på MDN: s definition "bredd" är

Breddmediafunktionen beskriver bredden på utmatningsenhetens återgivningsyta (till exempel bredden på dokumentfönstret eller bredden på sidrutan på en skrivare).

Vad betyder det?

View-port är bredden på själva enheten. Om din skärmupplösning säger att upplösningen är 1280 x 720 är bredden på visningsporten "1280px".

Oftare tilldelar många enheter olika pixelmängder för att visa en pixel. Till exempel har iPhone 6 Plus 1242 x 2208 upplösning. Men den verkliga visningsbredden och utsiktshöjden är 414 x 736. Det betyder att 3 pixlar används för att skapa 1 pixel.

Men om du inte ställde meta rätt sätt kommer den att försöka visa din webbsida med dess ursprungliga upplösning vilket resulterar i en utzoomad vy (mindre texter och bilder).

Medieförfrågningar för skärmar på näthinnan och icke retina

Även om detta bara fungerar för webKit-baserade webbläsare, är detta användbart:

/* ----------- 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) { 
}

Bakgrundsinformation

Det finns två typer av pixlar på skärmen. Den ena är de logiska pixlarna och den andra är de fysiska pixlarna. Oftast förblir de fysiska pixlarna samma, eftersom det är samma för alla bildskärmsenheter. De logiska pixlarna ändras baserat på enhetens upplösning för att visa pixlar av högre kvalitet. Enhetspixelförhållandet är förhållandet mellan fysiska pixlar och logiska pixlar. Till exempel rapporterar MacBook Pro Retina, iPhone 4 och högre ett enhetspixelförhållande på 2, eftersom den fysiska linjära upplösningen är dubbelt så stor som den logiska upplösningen.

Anledningen till att detta bara fungerar med webKit-baserade webbläsare är på grund av:

Leverantörens prefix -webkit- före regeln.
Detta har inte implementerats i andra motorer än WebKit och Blink.

Terminologi och struktur

Mediefrågor tillåter en att tillämpa CSS-regler baserat på typen av enhet / media (t.ex. skärm, tryck eller handhållenhet) som kallas mediatyp , ytterligare aspekter av enheten beskrivs med mediefunktioner som tillgängligheten för färg- eller visningsdimensioner.

Allmän struktur för en mediefråga

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

En mediefråga som innehåller en medietyp

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

En mediefråga som innehåller en medietyp och en mediefunktion

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

En mediefråga som innehåller en mediefunktion (och en implicit mediatyp av "alla")

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

Mediefrågor och IE8

Medieförfrågningar stöds inte alls i IE8 och nedan.

En Javascript-baserad lösning

För att lägga till support för IE8 kan du använda en av flera JS-lösningar. Till exempel kan Svara läggas till för att lägga till support för mediafrågor för IE8 endast med följande kod:

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

CSS Mediaqueries är ett annat bibliotek som gör samma sak. Koden för att lägga till det biblioteket i din HTML skulle vara identisk:

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

Alternativet

Om du inte gillar en JS-baserad lösning bör du också överväga att lägga till ett IE <9-formatmall där du anpassar din styling specifikt till IE <9. För det ska du lägga till följande HTML till din kod:

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

Notera :

Tekniskt är det ett alternativ till: att använda CSS-hack för att rikta in sig på IE <9. Det har samma inverkan som ett IE <9-formatmall, men du behöver inte ett separat formatmall för det. Jag rekommenderar dock inte det här alternativet, eftersom de producerar ogiltig CSS-kod (vilket är en av flera orsaker till att användningen av CSS-hacks i allmänhet rynker på idag).

Modified text is an extract of the original Stack Overflow Documentation

Licensierat under CC BY-SA 3.0

Inte anslutet till Stack Overflow

CSS
Mediefrågor

Sök…