Mediafrågor för mobila enheter. Mediafrågor i CSS

Användbara tips

2006 hade de flesta användare en bildskärm på 800*600. Men tiden är obönhörlig och någon gång blev 1024*768 "normalt". Webbresurser orienterade mot lägre upplösningar har nu tomt utrymme på sidorna. De som skapats genom att använda

@Media,

relativa värden.

Tack vare dem behöver du inte längre söka efter den optimala webbplatsbredden. @Media CSS

För att anpassa designen av ett webbprojekt till olika enheter (mobiltelefoner, surfplattor, skrivare etc.) används @Media. Av alla de olika typerna och frågorna är som regel även bredd implementerad. Låt oss överväga det senare. Det påverkar visningen av webbplatsen i webbläsarfönster med olika bredder. Därför, för att se det i aktion, räcker det att minska storleken på webbläsarfönstret.

Prova det nu. Och du kommer att se hur sidopanel av den här bloggen sönderfaller (sökningen flyttas ner, innehållet går in i artikeln), listorna i menyn förkortas, inskriptionen "Datum för uppdatering" tas bort, etc.

Layouten med de initiala blockvärdena specificeras. Lägg till regler före taggen

@media (max-width: 930px) ( /* detta kommer att visas på bildskärmsupplösningar upp till 930px */ .content-wrapper (utfyllnad: 0;) /* huvudinnehållet tar upp hela fönstrets utrymme */ ) @media ( max-bredd : 930px) och (min-bredd: 470px) ( /* för skärmupplösningar från 470 till 930 pixlar */ åt sidan (position: statisk; bredd: 100%; bakgrund: #ccc;) /* sidofältsoffset enl. placera i HTML och ändra bakgrunden */ ) @media (max-width: 469px) ( /* om den maximala skärmupplösningen är 469 pixlar */ body (font: .9em/1em "Helvetica Neue",Arial,Helvetica,sans -serif;) / * teckensnittsändringar */ åt sidan (visa: ingen;) /* sidospalten försvinner */ ) Istället för px är det bättre att använda em. Varför måste px-värdet delas med teckensnittsstorleken i px. Till exempel, 1600/16=100, nämligen media="(min-bredd: 100em)".

CSS-stilar kan antingen läggas till direkt i sidkoden eller användas extern fil, Till exempel:

Lägg upp skärmen som "liggande" (bredd större än höjd) och "porträtt" (bredd mindre än höjd) @media all och (orientation:landscape) ( /* stilar för liggande */ ) @media all och (orientation:portrait) ( /* porträttstilar */ ) eller

Översättning

Skärmupplösningarna sträcker sig idag från 320px (iPhone) till 2560px (större bildskärmar) eller ännu högre. Användare tittar inte längre på webbplatser endast på stationära datorer. Nu använder användare mobiltelefoner, små bärbara datorer, surfplattor som iPad eller Playbook för att komma åt Internet. Därför traditionell design med fast bredd fungerar inte längre. Designen måste vara anpassningsbar. Strukturen bör automatiskt ändras för att passa alla skärmupplösningar. Den här artikeln visar hur du skapar responsiv design för flera webbläsare med hjälp av HTML5- och CSS3-mediefrågor.

Låt oss först se detta i aktion. Innan du börjar, ta en titt på den sista demon för att se hur bra den ser ut. Ändra storlek på webbläsaren för att se hur layouten automatiskt ändrar storlek baserat på fönstrets bredd. Fler exempel Om du vill se fler exempel, kolla in följande WordPress-teman som jag gjorde med hjälp av mediafrågor: iTheme2, Funki, Minblr och Wumblr sidbehållare har en bredd på 980px för alla upplösningar som är större än 1024px. Mediefrågor används för att kontrollera bredden, om bredden är mindre än 980px, i detta fall blir layouten flytande istället för en fast bredd. Om bredden är mindre än 650px expanderar innehållet och sidofältsbehållaren med Fullskärm och bli i en kolumn.

HTML Vi kommer inte att uppehålla oss vid en detaljerad beskrivning av HTML. Den grundläggande strukturen för layouten beskrivs nedan. Jag har en "pagewrap" som innehåller "header", "content", "sidebar" och "footer".

Demo
Webbplatsbeskrivning

Hem

blogginlägg

class = "widget" >
widget

sidfot

HTML5.js Observera att demon använder HTML5. Internet Explorer under version 9 stöder inte nya element i HTML5, som , , , och andra. Därför kopplar vi Javascript-filen html5.js till HTML-dokumentet, vilket gör att IE kan förstå de nya elementen.

CSS Återställ HTML5-element till blockering Följande CSS kommer att blockera HTML5-element (artikel, åt sidan, figur, sidhuvud, sidfot, etc.).
artikel, åt sidan, detaljer, figcaption, figur, sidfot, sidhuvud, hgroup, meny, nav, avsnitt (
display: block;
) Beskriv grundstrukturen i CSS. Jag kommer inte att gå in på detaljer. Huvudbehållaren "pagewrap" är 980px bred. "Header" har en fast höjd på 160px. "Innehållsbehållaren" är 600px bred och skjuten åt vänster. "Sidebar" är 280px bred och tryckt åt höger.
#pagewrap (
bredd: 980px;
marginal: 0 auto;
}
#header (
höjd: 160px;
}
#innehåll (
bredd: 600px;
flyta till vänster;
}
#sidebar (
bredd: 280px;
flyta: höger;
}
#sidfot (
klara: båda;
) Steg 1 I det första steget implementeras inte mediefrågor i demon, så när du ändrar storleken på webbläsarfönstret kommer layouten att ha en fast bredd. Nu börjar det roliga - mediefrågor Frågor Javascript Internet Explorer 8 och tidigare versioner stöder inte CSS3-mediefrågor. Du kan aktivera det genom att lägga till Javascript-fil css3-mediaqueries.js.

Ansluta CSS-mediefrågor Skapa en ny CSS-fil för mediefrågor. Kolla in min senaste artikel för att se hur mediefrågor fungerar.
Skärmstorlek mindre än 980px (flytande layout) För skärmstorlekar mindre än 980px gäller följande regler:

sidomslag = bredd 95 %;
innehåll = bredd 60%;
sidofält = bredd 30 %.

Tips: Använd procentsatser (%) för att göra blocken gummiaktiga.
@mediaskärm och (maxbredd: 980px) (
#pagewrap (
bredd: 95%;
}
#innehåll (
bredd: 60%;
stoppning: 3% 4%;
}
#sidebar (
bredd: 30%;
}
#sidebar .widget (
stoppning: 8% 7%;
margin-bottom: 10px;
}
}
Skärmstorlek mindre än 650px (layout med en kolumn) Därefter ställer vi in CSS-regler för skärmstorlek mindre än 650px.

header = återställ höjden till auto;
sökformulär = position - 5px topp;
main-nav = återställ positionering till statisk;
site-logo = återställ positionering till statisk;
site-description = återställ positionering till statisk;
innehåll = ställ in bredden på auto (detta kommer att sträcka behållaren till full bredd)
sidebar = ställ in bredden till 100% och ta bort flottören.

@mediaskärm och (maxbredd: 650px) (
#header (
höjd: auto;
}
#sökformulär (
position: absolut;
topp: 5px;
höger: 0;
}
#main-nav (
position: statisk;
}
#site-logo (
marginal: 15px 100px 5px 0;
position: statisk;
}
#site-description (
marginal: 0 0 15px;
position: statisk;
}
#innehåll (
bredd: auto;
flyta: ingen;
marginal: 20px 0;
}
#sidebar (
bredd: 100%;
flyta: ingen;
marginal: 0;
}
) Skärmstorlek mindre än 480px Denna CSS kommer att tillämpas på skärmstorlekar mindre än 480px, vilket är bredden på iPhone i liggande läge.

html = inaktivera justering av teckenstorlek. Som standard ökar iPhone teckensnittsstorleken för enklare läsning. Du kan inaktivera detta genom att lägga till -webkit-text-size-adjust: none;
main-nav = återställ teckenstorleken till 90 %.

Översättning

Skärmupplösningarna sträcker sig idag från 320px (iPhone) till 2560px (större skärmar) eller ännu högre. Användare tittar inte längre på webbplatser endast på stationära datorer. Nu använder användare mobiltelefoner, små bärbara datorer, surfplattor som iPad eller Playbook för att komma åt Internet. Därför fungerar inte den traditionella designen med fast bredd längre. Designen måste vara anpassningsbar. Strukturen bör automatiskt ändras för att passa alla skärmupplösningar. Den här artikeln visar dig hur du skapar responsiv design för flera webbläsare med hjälp av HTML5- och CSS3-mediefrågor.

Låt oss först se detta i aktion. Innan du börjar, ta en titt på den sista demon för att se hur bra den ser ut. Ändra storlek på webbläsaren för att se hur layouten automatiskt ändrar storlek baserat på fönstrets bredd. Fler exempel Om du vill se fler exempel, kolla in följande WordPress-teman som jag gjorde med hjälp av mediafrågor: iTheme2, Funki, Minblr och Wumblr sidbehållare har en bredd på 980px för alla upplösningar som är större än 1024px. Mediefrågor används för att kontrollera bredden, om bredden är mindre än 980px, i detta fall blir layouten flytande istället för en fast bredd. Om bredden är mindre än 650 px expanderas innehållet och sidofältsbehållaren till helskärm och blir en kolumn.

HTML Vi kommer inte att uppehålla oss vid en detaljerad beskrivning av HTML. Den grundläggande strukturen för layouten beskrivs nedan. Jag har en "pagewrap" som innehåller "header", "content", "sidebar" och "footer".

Demo
Webbplatsbeskrivning

Hem

blogginlägg

class = "widget" >
widget

sidfot

HTML5.js Observera att demon använder HTML5. Internet Explorer under version 9 stöder inte nya element i HTML5, som , , , och andra. Därför kopplar vi Javascript-filen html5.js till HTML-dokumentet, vilket gör att IE kan förstå de nya elementen.

CSS Återställ HTML5-element till blockering Följande CSS kommer att blockera HTML5-element (artikel, åt sidan, figur, sidhuvud, sidfot, etc.).
artikel, åt sidan, detaljer, figcaption, figur, sidfot, sidhuvud, hgroup, meny, nav, avsnitt (
display: block;
) Beskriv grundstrukturen i CSS. Jag kommer inte att gå in på detaljer. Huvudbehållaren "pagewrap" är 980px bred. "Header" har en fast höjd på 160px. "Innehållsbehållaren" är 600px bred och skjuten åt vänster. "Sidebar" är 280px bred och tryckt åt höger.
#pagewrap (
bredd: 980px;
marginal: 0 auto;
}
#header (
höjd: 160px;
}
#innehåll (
bredd: 600px;
flyta till vänster;
}
#sidebar (
bredd: 280px;
flyta: höger;
}
#sidfot (
klara: båda;
) Steg 1 I det första steget implementeras inte mediefrågor i demon, så när du ändrar storleken på webbläsarfönstret kommer layouten att ha en fast bredd. Nu börjar det roliga - mediefrågor Frågor Javascript Internet Explorer 8 och tidigare versioner stöder inte CSS3-mediefrågor. Du kan aktivera det genom att lägga till Javascript-filen css3-mediaqueries.js.

Ansluta CSS-mediefrågor Skapa en ny CSS-fil för mediefrågor. Kolla in min senaste artikel för att se hur mediefrågor fungerar.
Skärmstorlek mindre än 980px (flytande layout) För skärmstorlekar mindre än 980px gäller följande regler:

sidomslag = bredd 95 %;
innehåll = bredd 60%;
sidofält = bredd 30 %.

header = återställ höjden till auto;
sökformulär = position - 5px topp;
main-nav = återställ positionering till statisk;
site-logo = återställ positionering till statisk;
site-description = återställ positionering till statisk;
innehåll = ställ in bredden på auto (detta kommer att sträcka behållaren till full bredd)
sidebar = ställ in bredden till 100% och ta bort flottören.

html = inaktivera justering av teckenstorlek. Som standard ökar iPhone teckensnittsstorleken för enklare läsning. Du kan inaktivera detta genom att lägga till -webkit-text-size-adjust: none;
main-nav = återställ teckenstorleken till 90 %.

@mediaskärm och (maxbredd: 480px) (
html (
-webkit-text-size-adjust: ingen ;
}
#main-nav a (
teckenstorlek: 90%;
stoppning: 10px 8px;
}
) Elastiska bilder För att göra bilder elastiska, lägg helt enkelt till max-width:100% och height:auto . Bilder max-width:100% och height:auto fungerar i IE7, men fungerar inte i IE8 (ja, en annan konstig bugg). För att fixa det måste du lägga till width:auto\9 för IE8.
img(
max-bredd: 100 %;
höjd: auto;
width: auto \9; /* dvs8 */
) Elastiska inbäddade videor För videor tillämpar vi samma regler som för bilder. Av okända anledningar fungerar inte max-width:100% (för video) i Safari. Du måste använda bredd: 100 % .
.video inbädda
.videoobjekt
.video iframe (
bredd: 100%;
höjd: auto;
) Initial Scale Meta Tag (iPhone) Som standard komprimerar iPhone Safari sidor så att de passar skärmen. Följande metatagg säger till iPhone Safari att använda enhetens bredd som fönsterbredd och inaktivera den.
Slutlig demo Låt oss öppna den sista demon och ändra storlek på skärmen för att se mediafrågor i aktion. Glöm inte att kolla på iPhone, iPad, Blackberry (senaste versionerna) och Android-telefoner för att se mobilversionen. Vi älskar att arbeta med data. Vi lägger mycket tid på att granska analysinformation om våra webbplatser. Alla webbutvecklare som också är intresserade av detta har förmodligen märkt hur mycket trafik från mobila enheter har ökat den senaste tiden. Under det senaste året har andelen sidvisningar på våra huvudsajter från smartphones och surfplattor ökat markant. Det gör att fler och fler besökare använder enheter med moderna webbläsare, som stöder det senaste HTML-versioner, CSS och JavaScript. Skärmbredden på sådana enheter är dock vanligtvis begränsad till 320 pixlar. Implementering Till att börja med gör semantisk uppmärkning av innehåll det lättare att omforma sidor om det behövs. Med hjälp av en stilmall skapade vi en flytande layout. Detta är det första steget mot att nå vårt mål. Istället för breddattribut för containrar började vi ange max-width . Height-attributet har ersatts med min-height-attributet till stort typsnitt eller flerradstext bröt inte mot behållarens gränser. För att förhindra att bilder med fast bredd bryter gummikolumnerna gäller följande CSS-regel:

Bild (maxbredd: 100 %; )
Gummimodell – bra idé, men användningen av en sådan layout medför vissa begränsningar. Lyckligtvis stöds nu mediefrågor av alla moderna webbläsare, inklusive IE9+ och de flesta webbläsare på mobila enheter. Detta gör att du kan skapa webbplatser vars visningskvalitet i mobila webbläsare inte minskar, eftersom de är optimerade för ett visst gränssnitt. Men först måste vi bestämma vilka funktioner hos smartphones som webbservrar ska ta hänsyn till.

Utsiktsportar
När är en pixel inte en pixel? I händelse av att vi pratar om en smartphone. Vanligtvis efterliknar smartphonewebbläsare stationära webbläsare med hög upplösning, så att sidor visas i dem som på en skärm. Det är därför det finns ett "översiktsläge" med liten text som är omöjlig att läsa utan förstoring. Standardbredden för visningsporten i vanliga Android-webbläsare är 800 pixlar, och i iOS-webbläsare är den 980 pixlar, oavsett det faktiska antalet fysiska pixlar på skärmen.

För att växla webbläsaren till ett mer läsbart läge måste du använda viewport-metaelementet:

Det finns många alternativ för mobila enheters skärmupplösningar, men standardbredden för enheter som rapporteras av webbläsare är vanligtvis runt 320 pixlar. Om din mobila enhets skärmbredd är 640 fysiska pixlar, skalas en bild som är 320 pixlar bred till hela skärmens bredd och kommer att använda dubbelt så många pixlar i bearbetningen. Dubbla pixeltätheten säkerställer alltså en skarpare visning på en liten skärm jämfört med en stationär datorskärm.

Det är viktigt att om enhetsbredd anges som värdet på width-elementet i viewport-metataggen, uppdateras detta värde om användaren ändrar orienteringen på smartphone- eller surfplattans skärm. I kombination med mediefrågor låter den här funktionen dig ändra sidlayouten när enheten roteras:

@mediaskärm och (min-bredd:480px) och (maxbredd:800px) ( /* Target liggande smartphones, stående surfplattor, smala stationära datorer */ ) @mediaskärm och (max-width:479px) ( /* Target portrait smartphones */ )
Beroende på hur din webbplats fungerar och ser ut på skärmar olika enheter, kan du behöva använda olika kontrollpunkter. Du kan också använda en mediefråga för att välja en specifik orientering utan hänsyn till pixelformat, om den här funktionen stöds.

@media all och (orientering: liggande) ( /* Målenhet i liggande läge */ ) @media all och (orientering: stående) ( /* Målenhet i stående läge */ )

Ändrar platsen för innehållet och bildens skala –

Exempel på användning av mediafrågor
Vi lanserade nyligen en ny version av sidan Om Google. För att göra det bekvämare för användare av enheter med små skärmar, såsom surfplattor och smartphones, att arbeta med den här sidan, har vi förutom gummilayouten lagt till flera mediefrågor till dess kod.

Istället för att rikta in oss på specifika skärmupplösningar definierade vi en relativt bred uppsättning riktmärken. Om din skärmupplösning är större än 1024 pixlar visas sidan i sin ursprungliga layout i ett rutnät med 12 kolumner. Om det är mellan 801 och 1024 pixlar visar den flytande layouten en något komprimerad version av sidan.

Endast när skärmupplösningen är mindre än 800 pixlar visas icke-kärninnehåll längst ned på sidan:

@mediaskärm och (maxbredd: 800px) ( /* specifik CSS */ )
Den sista mediefrågan gäller smartphones:

@mediaskärm och (maxbredd: 479px) ( /* specifik CSS */ )
Från och med denna tidpunkt upphör laddningen av stora bilder; innehållsblocken placeras ovanför varandra. Vi har också lagt till extra blanksteg mellan innehållselement för att tydligare avgränsa avsnitt.

Dessa enkla tekniker gjorde det möjligt att optimera din webbplats för visning på en mängd olika enhetstyper.

Innehållslayout ändrad, stor bild borttagen - Om Google

Slutsats Det är viktigt att förstå att det inte finns någon enkel lösning för att göra webbplatser lätta att se på mobila enheter och enheter med smala skärmar. Gummimodeller är bra som utgångspunkt, men det finns vissa begränsningar för att använda dem. Mediefrågor hjälper också till att optimera webbplatser, men det får vi inte glömma i

Mediefrågor är användbara när du vill ändra din webbplats eller app beroende på en enhets allmänna typ (som utskrift kontra skärm) eller specifika egenskaper och parametrar (som skärmupplösning eller webbläsares visningsportbredd).

Mediafrågor används för följande:

För att villkorligt tillämpa stilar med CSS @media och @import at-regler.
Att rikta in sig på specifika media för , och andra HTML-element.
För att testa och övervaka mediatillstånd med JavaScript-metoderna Window.matchMedia() och MediaQueryList.addListener().

Notera: Exemplen på den här sidan använder CSS:s @media i illustrativt syfte, men den grundläggande syntaxen förblir densamma för alla typer av mediefrågor.

Syntax

En mediefråga består av en valfri Mediatyp och valfritt antal mediefunktion uttryck. Flera frågor kan kombineras på olika sätt med hjälp av logiska operatorer. Mediefrågor är skiftlägesokänsliga.

En mediefråga beräknas till sant när medietypen (om angiven) matchar enheten på vilken ett dokument visas och alla mediefunktionsuttryck beräknas som sanna. Frågor som involverar okända medietyper är alltid falska.

Obs! En stilmall med en mediefråga kopplad till sin tagg laddas fortfarande ned även om frågan returnerar falskt. Innehållet kommer dock inte att gälla om inte och tills resultatet av frågan ändras till sant.

Medietyper

Medietyper beskriv den allmänna kategorin för en enhet. Förutom när de inte eller bara logiska operatorerna används, är mediatypen valfri och all-typen kommer att antydas.

Alla Lämpliga för alla enheter. print Avsedd för bläddrat material och dokument som visas på en skärm i förhandsgranskningsläge. (Se sidad media för information om formateringsproblem som är specifika för dessa format.) Skärm Avsedd främst för skärmar. tal Avsedd för talsyntes.

Utfasade mediatyper: CSS2.1 och Media Queries 3 definierade flera ytterligare mediatyper (tty, tv, projektion, handhållen, punktskrift, präglad och fonetisk), men de föråldrades i Media Queries 4 och bör inte användas typ har ersatts av tal , som är liknande.

Mediefunktioner

Mediefunktioner beskriv specifika egenskaper hos användaragenten, utenheten eller miljön. Mediefunktionsuttryck testar sin närvaro eller värde och är helt valfria. Varje mediefunktionsuttryck måste omges av parenteser.

Namn Sammanfattning Notes

bredd	Utsiktsportens bredd
höjd	Höjd på utsiktsplatsen
bildförhållande	Bredd-till-höjd bildförhållande för visningsporten
orientering	Utsiktsportens orientering
upplösning	Pixeltäthet för utenheten
skanna	Skanningsprocessen för utenheten
rutnät	Använder enheten en rutnäts- eller bitmappsskärm?
uppdatering	Hur ofta utdataenheten kan ändra utseendet på innehållet
överloppsblock	Hur hanterar utmatningsenheten innehåll som svämmar över visningsporten längs blockaxeln?	Tillagd i Media Queries nivå 4.
overflow-inline	Kan innehåll som svämmar över visningsporten längs den inline-axeln rullas?	Tillagd i Media Queries nivå 4.
Färg	Antal bitar per färgkomponent i utenheten, eller noll om enheten inte är färg
färgomfång	Ungefärligt utbud av färger som stöds av användaragenten och utdataenheten	Tillagd i Media Queries nivå 4.
färgindex	Antal poster i utdataenhetens färguppslagstabell, eller noll om enheten inte använder en sådan tabell
visningsläge	Applikationens visningsläge, som specificerats i webbappmanifestets visningsmedlem	Definierat i Web App Manifest-specifikationen.
svartvit	Bitar per pixel i utenhetens monokroma rambuffert, eller noll om enheten inte är monokrom
inverterade färger	Inverterar användaragenten eller det underliggande operativsystemet färger?
pekare	Är den primära inmatningsmekanismen en pekanordning, och i så fall hur exakt är den?	Tillagd i Media Queries nivå 4.
sväva	Tillåter den primära inmatningsmekanismen användaren att hålla muspekaren över element?	Tillagd i Media Queries nivå 4.
någon pekare	Är någon tillgänglig inmatningsmekanism en pekanordning, och i så fall hur exakt är den?	Tillagd i Media Queries nivå 4.
någon-hovra	Tillåter någon tillgänglig inmatningsmekanism användaren att hålla muspekaren över element?	Tillagd i Media Queries nivå 4.
ljusnivå	Ljusnivån i miljön	Tillagd i Media Queries nivå 5.
föredrar-reducerad-rörelse	Användaren föredrar mindre rörelse på sidan	Tillagd i Media Queries nivå 5.
föredrar-minskad-transparens	Användaren föredrar minskad transparens	Tillagd i Media Queries nivå 5.
föredrar-kontrast	Upptäcker om användaren har begärt att systemet ska öka eller minska mängden kontrast mellan intilliggande färger	Tillagd i Media Queries nivå 5.
föredrar-färgschema	Upptäck om användaren föredrar ett ljust eller mörkt färgschema	Tillagd i Media Queries nivå 5.
skript	Upptäcker om skript (dvs. JavaScript) är tillgängligt	Tillagd i Media Queries nivå 5.
enhetsbredd	Bredden på renderingsytan på utenheten
enhetshöjd	Höjd på renderingsytan på utenheten	Utfasad i Media Queries nivå 4.
enhet-aspekt-förhållande	Bredd-till-höjd bildförhållande för utenheten	Utfasad i Media Queries nivå 4.

Logiska operatorer

De logiska operatorer inte , och , och kan endast användas för att skapa en komplex mediefråga. Du kan också kombinera flera mediefrågor till en enda regel genom att separera dem med kommatecken.

och

Operatören och används för att kombinera flera mediefunktioner till en enda mediefråga, vilket kräver att varje kedjad funktion returnerar sant för att frågan ska vara sann. Den används också för att sammanfoga mediefunktioner med mediatyper.

inte

Operatorn not används för att negera en mediefråga och returnerar true om frågan annars skulle returnera falskt. Om den finns i en kommaseparerad lista med frågor, kommer den bara att förneka den specifika fråga som den tillämpas på. Om du använder operatören not, du måste också ange en mediatyp.

Obs: På nivå 3 kan inte nyckelordet användas för att negera ett enskilt mediefunktionsuttryck, bara en hel mediefråga.

endast

Den enda operatorn används för att tillämpa en stil endast om en hel fråga matchar, och är användbar för att förhindra äldre webbläsare från att tillämpa valda stilar. Om du använder den enda operatören, du måste också ange en mediatyp.

, (kommatecken)

Komma används för att kombinera flera mediefrågor till en enda regel. Varje fråga i en kommaseparerad lista behandlas separat från de andra. Således, om någon av frågorna i en lista är sann, returneras hela mediepåståendet sant. Med andra ord, listor beter sig som en logisk eller operator.

Inriktning på mediatyper

Medietyper beskriver den allmänna kategorin för en given enhet. Även om webbplatser vanligtvis utformas med skärmar i åtanke, kanske du vill skapa stilar som riktar sig till speciella enheter som skrivare eller ljudbaserade skärmläsare. Till exempel riktar denna CSS till skrivare:

@media print ( ... )

Du kan också rikta in dig på flera enheter. Till exempel använder den här @media-regeln två mediefrågor för att rikta in sig på både skärm- och utskriftsenheter:

@mediaskärm, skriv ut ( ... )

Se för en lista över alla mediatyper. Eftersom de bara beskriver enheter i mycket breda termer, är bara några få tillgängliga; för att rikta in dig på mer specifika attribut, använd mediefunktioner istället.

Inriktning på mediafunktioner

Mediefunktioner beskriver de specifika egenskaperna hos en given användaragent, utenhet eller miljö. Du kan till exempel tillämpa specifika stilar på bredbildsskärmar, datorer som använder möss eller på enheter som används i svagt ljus. Det här exemplet tillämpar stilar när användarens primär inmatningsmekanism (som en mus) kan sväva över element:

@media (sväva: sväva) ( ... )

Många mediefunktioner är utbudsfunktioner, vilket betyder att de kan ha prefixet "min-" eller "max-" för att uttrycka "minsta villkor" eller "maximala villkor" begränsningar. Till exempel kommer denna CSS endast att tillämpa stilar om din webbläsares visningsportbredd är lika med eller smalare än 12450px:

@media (maxbredd: 12450px) ( ... )

Om du skapar en mediefunktionsfråga utan att ange ett värde kommer de kapslade stilarna att användas så länge som funktionens värde inte är noll (eller inget , på nivå 4). Till exempel kommer denna CSS att gälla för alla enheter med en färgskärm:

@media (färg) ( ... )

Om en funktion inte gäller enheten som webbläsaren körs på är uttryck som involverar den mediefunktionen alltid falska. Till exempel kommer stilarna som är kapslade i följande fråga aldrig att användas, eftersom ingen enhet med endast tal har en skärm bildförhållande:

@media tal och (bildförhållande: 11/5) ( ... )

För fler exempel, se referenssidan för varje specifik funktion.

Skapa komplexa mediafrågor

Ibland kanske du vill skapa en mediefråga som beror på flera villkor. Det är här logiska operatorer komma in: inte , och , och bara . Dessutom kan du kombinera flera mediefrågor till en kommaseparerad lista; detta låter dig tillämpa samma stilar i olika situationer.

I det föregående exemplet har vi redan sett operatorn och användas för att gruppera ett media typ med ett media funktion. Operatören och kan också kombinera flera mediefunktioner till en enda mediefråga. Not-operatorn förnekar under tiden en mediefråga och vänder i princip om dess normala betydelse. Den enda operatören hindrar äldre webbläsare från att tillämpa stilarna.

Obs: I de flesta fall används alla media som standard när ingen annan typ anges. Men om du använder inte eller bara operatorerna måste du uttryckligen ange en mediatyp.

Kombinera flera typer eller funktioner

Nyckelordet och kombinerar en mediefunktion med en mediatyp eller andra mediefunktioner. Det här exemplet kombinerar två mediefunktioner för att begränsa stilar till landskapsorienterade enheter med en bredd på minst 30 ems:

@media (min-bredd: 30 em) och (orientering: landskap) ( ... )

För att begränsa stilarna till enheter med en skärm kan du koppla mediafunktionerna till skärmmedietypen:

@mediaskärm och (min-bredd: 30 em) och (orientering: liggande) ( ... )

Testar för flera frågor

Du kan använda en kommaseparerad lista för att tillämpa stilar när användarens enhet matchar någon av olika mediatyper, funktioner eller tillstånd. Till exempel kommer följande regel att tillämpa dess stilar om användarens enhet har antingen ett minimum höjd 680px ellerär en skärmenhet i stående läge:

@media (min-höjd: 680px), skärm och (orientering: stående) ( ... )

Om man tar exemplet ovan, om användaren hade en skrivare med en sidhöjd på 800px, skulle mediasatsen returnera sant eftersom den första frågan skulle gälla. På samma sätt, om användaren var på en smartphone i stående läge med en visningsporthöjd på 480px, skulle den andra frågan gälla och mediepåståendet skulle fortfarande returnera sant.

Invertera en frågas betydelse

Nyckelordet inte inverterar innebörden av en hel mediefråga. Det kommer bara att förneka den specifika mediefrågan den tillämpas på. (Den kommer alltså inte att gälla för varje mediefråga i en kommaseparerad lista med mediefrågor.) Nyckelordet not kan inte användas för att negera en enskild funktionsfråga, bara en hel mediefråga. Noten utvärderas sist i följande fråga:

@media inte alla och (monokrom) ( ... )

Så att ovanstående fråga utvärderas så här:

@media inte (alla och (monokrom)) ( ... )

Snarare än så här:

@media (inte alla) och (monokrom) ( ... )

Som ett annat exempel, följande mediefråga:

@media inte skärm och (färg), print och (färg) ( ... )

Bedöms så här:

@media (inte (skärm och (färg))), print och (färg) ( ... )

Förbättra kompatibiliteten med äldre webbläsare

Det enda nyckelordet hindrar äldre webbläsare som inte stöder mediefrågor med mediefunktioner från att tillämpa de givna stilarna. Det har ingen effekt på moderna webbläsare.

@media only skärm och (färg) ( ... )

Syntaxförbättringar i nivå 4

Media Queries Level 4-specifikationen innehåller några syntaxförbättringar för att göra mediafrågor med funktioner som har en "intervall"-typ, till exempel bredd eller höjd, mindre omfattande. Nivå 4 lägger till en intervallkontext för att skriva sådana frågor. Om vi till exempel använder maxfunktionaliteten för bredd kan vi skriva följande:

@media (maxbredd: 30 em) ( ... )

I Media Queries Level 4 kan detta skrivas som:

@media (bredd

Mediafrågor för mobila enheter. Mediafrågor i CSS

Populära artiklar

Senaste artiklarna

Avsnitt

Sidor

Specialprojekt

Kontakter