9 avancerade mediefrågor CSS-tricks du bör känna till

En användbar, tillgänglig upplevelse är avgörande för en framgångsrik webbplats. Om dina läsare har en positiv upplevelse är det mer sannolikt att de utför en uppmaning, inklusive att köpa produkter. De är också mer benägna att återvända eller rekommendera din webbplats till andra. Erfarenhet är nyckeln.

Mediefrågor erbjuder olika CSS-funktioner som kan anpassa din webbplats. De låter dig skräddarsy varje användares upplevelse baserat på deras enhets kapacitet. Lär dig hur du ger dina läsare den bästa upplevelsen, oavsett om de använder sin telefon eller en stor skrivbordsskärm.

1. Pekarfunktionen

De @mediaregel har en pekfunktion som låter dig anpassa din design baserat på den primära pekenheten. Du kan testa för tillgänglighet och kvalitet.

Denna pekare mediefrågefunktion tar ett av tre värden: ingen, grov eller fin. De ingen värdet gäller när det inte finns någon pekdon. De grov värdet gäller när det primära pekdonet har en minskad noggrannhetsnivå. Och den bra värdet gäller när det primära pekdonet har en hög noggrannhetsnivå.

Använda pekarfunktionen

Alternativ att välja mellan: 
 Alternativ ett
 Alternativ två

Koden ovan genererar två ingångsradioalternativ, som kommer att variera baserat på noggrannheten hos en dators primära pekdon.

En dator som har en korrekt (eller högkvalitativ) primär pekenhet visar följande webbsida:

En dator som har en primär enhet med begränsad noggrannhet (eller låg kvalitet) visar följande webbsida:

Enheten som har en primär pekenhet med en begränsad noggrannhetsnivå har större radioknappar. Detta ger en bättre användarupplevelse för sådana användare. Med pekarfunktionen kan du se till att alla dina användare får en trevlig upplevelse, oavsett deras enhet.

2. Funktionen för valfri pekare

Precis som pekfunktionen riktar sig funktionen för valfri pekare mediefråga på pekdon. Men valfri pekare utvärderar varje pekdon på en dator. Any-pointer-funktionen använder också ingen, grov, och bra värden.

Använda valfri pekare-funktion

 @media (vilket som helst: bra) {
 input[type="radio"] {
 bredd: 15px;
 höjd: 15px;
 kantradie: 20px;
 kantbredd: 1px;
 }
 }
@media (valfri pekare: grov) {
 input[type="radio"] {
 bredd: 25px;
 höjd: 25px;
 kantradie: 20px;
 kantbredd: 2px;
 }
 }

Du kan helt enkelt ersätta koden ovan med mediefrågasektionen i koden i exemplet med pekarfunktioner. Koden ovan ger en lämplig skärm baserad på kvaliteten på alla pekdon som en dator kan ha.

3. Hover-funktionen

Funktionen för hover media query utvärderar om den primära inmatningsmekanismen för en enhet är kapabel att sväva över elementen i ett användargränssnitt.

Använda svävfunktionen

 /* CSS */
 en{
 text-dekoration: ingen;
 svart färg;
 }
 @media (hover: hover) {
 a: hover {
 färgen blå;
 }
 }
 HTML 
 Ett länkelement

Koden ovan kommer att visa en element. Den kommer att ändra färg (från svart till blå) när den primära inmatningsmekanismen för en enhet (som stöder hovring) svävar över den.

4. Funktionen för valfri svävning

De någon-hovra mediafrågan riktar sig mot alla inmatningsmekanismer, inklusive den primära inmatningsmekanismen.

Använda funktionen för valfri svävning

@media (any-hover: hover) {
 a: hover {
 färgen blå;
 }
 }

Mediefrågan ovan ger en hovringseffekt för alla inmatningsmekanismer som kan sväva över ett element.

5. Upplösningsfunktionen

Funktionen för upplösning mediefråga beräknar antalet pixlar som visas av en specifik enhet. En enhet som visar fler pixlar per tum har en bättre upplösning eftersom den visar bilder med mer detaljer. Den här funktionen kan hjälpa en utvecklare att bestämma vilken enhetsanvändare som kan se element i ett användargränssnitt tydligare.

Upplösningsfunktionen använder räckvidd. Detta betyder att såväl som att använda upplösning nyckelord kan du använda min-upplösning och maxupplösning. Upplösningsfunktionen för mediafrågan tillhör upplösningsdatatypen. Det betyder att upplösningsfunktionen är mätbar i en av tre enheter: punkter per tum (dpi), punkter per centimeter (dpcm) eller punkter per pixel (dppx).

Använda upplösningsfunktionen

/* CSS */
@media (min-upplösning: 72dpi) {
 p {
 färg vit;
 bakgrundsfärg: blå;
 }
}
 HTML 

 Lorem ipsum dolor sit, amet consectetur adipisicing elit.

Den lägsta upplösningen en enhet kan ha och fortfarande visa kvalitetsbilder är 72 dpi. Så om en enhet har en upplösning på 72 dpi eller mer kommer den att visa följande utdata i sin webbläsare:

6. Orienteringsfunktionen

En enhetsvyport kan bara ha en av två orienteringar: porträtt eller landskap. Du bör notera att en visningsportorientering skiljer sig från en enhetsorientering. Om en enhet använder ett mjukt tangentbord kan dess visningsport ändras från stående till liggande medan själva enheten fortfarande är i stående läge.

Använda orienteringsfunktionen

/* CSS */
 kropp{
 display: flex;
 }
 sektion{
 kant: 2px fast blå;
 stoppning: 3px;
 marginal: 3px;
 }
 @media (orientering: liggande) {
 kropp {
 flex-riktning: rad;
 }
 }
@media (orientering: porträtt) {
 kropp {
 flex-riktning: kolumn;
 }
 }
 HTML 
 Lorem ipsum, dolor sit amet consectetur adipisicing elit.

 Lorem ipsum, dolor sit amet consectetur adipisicing elit.

 Lorem ipsum, dolor sit amet consectetur adipisicing elit.

Koden ovan ändrar layouten för en webbsida baserat på orienteringen av en enhet.

En enhet med en viewport i liggande läge visar följande webbsida:

En enhet med en viewport i stående läge visar följande webbsida:

7. Höjdfunktionen

Funktionen för höjdmediafråga låter dig specificera CSS-stil baserat på visningsporthöjden på en användares enhet. Den här funktionen stöder räckvidd, så du kan också använda min-höjd och maximal höjd nyckelord.

Använda höjdfunktionen

 /* CSS */
 @media (min-höjd: 360px) {
 p{
 kant: 2px prickade orangeröd;
 }
}
 HTML 

 Lorem ipsum dolor sit amet consectetur adipisicing elit.

Koden ovan anpassar vad en användare ser baserat på höjden på sin enhet. Användare med en enhetshöjd på 360 px och uppåt kommer att se något som liknar följande webbsida:

Enheter med en höjd under 360px visar inte ramarna runt stycket på webbsidan.

8. Breddfunktionen

Med funktionen för width media query kan du skapa specifik CSS-stil baserat på visningsportens bredd på en användares enhet. Denna funktion stöder också räckvidd, så du har möjlighet att använda min bredd och maximal bredd nyckelord.

Använda breddfunktionen

 /* CSS */
 @media (min-bredd: 600px) {
 p{
 kant: 2px fast lila;
 }
}
 HTML 

 Lorem ipsum dolor sit amet consectetur adipisicing elit.

Koden ovan anpassar vad en användare ser baserat på enhetens bredd. Användare med en enhetsbredd på 600px och mer kommer att se något i stil med följande webbsida:

Att använda bredd- och höjdbaserade mediefrågor kan vara en effektiv strategi i gör din webbplats responsiv.

9. Färgfunktionen

Frågefunktionen för färgmedia utvärderar en enhets färgkomponent (röd, grön, blå). Värdet hänvisar till hur många bitar en displaye använder för varje komponent, vilket definierar hur många olika färger den kan visa. Moderna enheter använder vanligtvis en 24-bitarsskärm som använder åtta bitar per färgkomponent. Det tar också ett heltalsvärde, där en färglös enhet är noll.

Färgfunktionen använder också min-färg och max-färg intervall.

Använder färgfunktionen

 /* CSS */
 @media (min-färg: 7) {
 p{
 kant: 2px fast grön;
 }
}
 HTML 

 Lorem ipsum dolor sit amet consectetur adipisicing elit.

Enheter med en färgkomponent på sju och uppåt visar följande utdata i sina webbläsare:

Nu kan du skapa unika användarupplevelser

Du bör kunna använda dessa avancerade mediefrågor för att förbättra upplevelsen för varje användare som besöker din webbplats eller applikation. Det är viktigt att ge mobilanvändare och datoranvändare en lika positiv upplevelse på din webbplats.

Mediefrågor är inte de enda CSS-verktygen som kan stärka dina utvecklarfärdigheter.

8 viktiga CSS-tips och tricks som alla utvecklare bör känna till

Läs Nästa

Om författaren