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 vidtar åtgärder, inklusive att köpa produkterna. De är också mer benägna att återvända till din webbplats eller rekommendera den till andra. Erfarenhet är nyckeln.

Media Queries tillhandahåller olika CSS-funktioner som kan optimera din webbplats. De låter dig skräddarsy varje användares upplevelse baserat på funktionerna hos deras enhet. Lär dig hur du ger dina läsare den bästa möjliga upplevelsen, oavsett om du använder telefonen eller en stor skrivbordsskärm.

1. Indikatorfunktion

@MediaRule 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.

Den här funktionen för indikatormediefråga har ett av tre värden: ingen, grov eller fin. Inget av värdena tillämpas om det inte finns någon pekdon. Makrovärdet tillämpas när den primära pekdonet har låg noggrannhet. Och finvärdet tillämpas när den primära pekdonet har en hög grad av noggrannhet.

Ovanstående kod genererar två ingångsradioalternativ, som kommer att variera beroende på noggrannheten hos datorns primära pekdon.

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

2. Vilken pekare som helst

Funktionen för mediefråga utan pekare, liksom pekarfunktionen, riktar sig till pekdon. Emellertid utvärderas ingen pekare till varje pekdon i datorn. Funktionen utan pekare använder också värdena Ingen, Grov och Fin.

Du kan enkelt ersätta koden ovan med Media Query-avsnittet i koden i exemplet med pekarfunktioner. Ovanstående kod ger en lämplig skärm baserat på kvaliteten på alla pekdon som datorn kan ha.

3. Hover funktion

Funktionen Hover Media Query utvärderar om enhetens primära inmatningsmekanism kan sväva över element i användargränssnittet.

Ovanstående kod visar elementet <a>. Den kommer att ändra färg (från svart till blå) närhelst en enhets primära inmatningssystem (som stöder hovring) förs över den.

4. Alla hover-funktioner

Alla hovringsmediafrågor riktar sig mot alla inmatningsmekanismer, inklusive den primära inmatningsmekanismen.

Ovanstående mediefråga ger en hovringseffekt för alla inmatningsmekanismer som kan sväva över ett element.

5. Upplösningsfunktion

Funktionen Resolution Media Query räknar antalet pixlar som visas av en specifik enhet. En enhet som visar fler pixlar per tum har 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 elementen i användargränssnittet tydligare.

Upplösningsfunktionen använder räckvidd. Det betyder att du kan använda min-upplösning och max-upplösning samt använda nyckelordet resolution. Upplösningsfunktionen för mediafrågan är relaterad till 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).

6. Orienteringsfunktion

Enhetens visningsport kan bara ha en av två orienteringar: stående eller liggande. Du bör notera att visningsportens orientering skiljer sig från enhetens orientering. Om en enhet använder det mjuka tangentbordet kan dess vyport ändras från stående till liggande medan enheten fortfarande är i stående läge.

7. Höjdfunktion

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

Enheter med en höjd mindre än 360px visar inte en ram runt ett stycke på en webbsida.

8. Breddfunktion

Med funktionen Width Media Query kan du skapa specifik CSS-stil baserat på visningsportbredden på användarens enhet. Den här funktionen stöder också intervall, så du har möjlighet att använda sökord med min bredd och max bredd.

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

9. Färgfunktion

Funktionen Color Media Query utvärderar färgkomponenten (röd, grön, blå) på enheten. Värdet hänvisar till hur många bitar en bildskärm använder för varje komponent, vilket definierar hur många olika färger den kan visa. Moderna enheter använder vanligtvis 24-bitarsskärmar som använder åtta bitar per färgkomponent. Det tar också ett heltalsvärde, där ett färglöst instrument är noll.

Leave a Reply

Your email address will not be published. Required fields are marked *