9 avanserte CSS-triks for mediesøk du bør vite

En brukbar, tilgjengelig opplevelse er avgjørende for et vellykket nettsted. Hvis leserne dine har en positiv opplevelse, er det mer sannsynlig at de utfører en oppfordring til handling, inkludert å kjøpe produkter. Det er også mer sannsynlig at de kommer tilbake eller anbefaler nettstedet ditt til andre. Erfaring er nøkkelen.

Mediespørringer tilbyr forskjellige CSS-funksjoner som kan tilpasse nettstedet ditt. De lar deg skreddersy hver brukers opplevelse basert på egenskapene til enheten deres. Lær hvordan du kan gi leserne dine den beste opplevelsen, enten de bruker telefonen eller en stor skrivebordsskjerm.

1. Pekerfunksjonen

De @media regel har en pekerfunksjon som lar deg tilpasse designet basert på den primære pekeenheten. Du kan teste for tilgjengelighet og kvalitet.

Denne pekeren mediespørringsfunksjon tar en av tre verdier: ingen, grov eller fin. De ingen verdien gjelder når det ikke er noen pekeenhet. De grov verdien gjelder når den primære pekeenheten har et redusert nøyaktighetsnivå. Og fint verdien gjelder når den primære pekeenheten har et høyt nivå av nøyaktighet.

Bruke pekerfunksjonen

Alternativer å velge mellom: 
 Alternativ én
 Alternativ to

Koden ovenfor genererer to inngangsradioalternativer, som vil variere basert på nøyaktigheten til datamaskinens primære pekeenhet.

En datamaskin som har en nøyaktig (eller høykvalitets) primær pekeenhet vil vise følgende nettside:

En datamaskin som har en primær enhet med begrenset nøyaktighet (eller lav kvalitet) vil vise følgende nettside:

Enheten som har en primær pekeenhet med et begrenset nivå av nøyaktighet har større radioknapper. Dette gir en bedre brukeropplevelse for slike brukere. Med pekerfunksjonen kan du sørge for at alle brukerne dine får en hyggelig opplevelse, uavhengig av enheten deres.

2. Enhver-peker-funksjonen

I likhet med pekerfunksjonen retter valgfri peker-mediespørringsfunksjonen seg mot pekeenheter. Imidlertid evaluerer en hvilken som helst pekerfunksjon hver pekeenhet på en datamaskin. Enhver-peker-funksjonen bruker også ingen, grov, og fint verdier.

Bruke valgfri pekerfunksjon

 @media (enhver peker: greit) {
 input[type="radio"] {
 bredde: 15px;
 høyde: 15px;
 kantradius: 20px;
 kant-bredde: 1px;
 }
 }
@media (hvilken som helst peker: grov) {
 input[type="radio"] {
 bredde: 25px;
 høyde: 25px;
 kantradius: 20px;
 kant-bredde: 2px;
 }
 }

Du kan ganske enkelt erstatte koden ovenfor med mediespørringsdelen av koden i pekerfunksjonseksemplet. Koden ovenfor gir en passende skjerm basert på kvaliteten på en hvilken som helst pekeenhet som en datamaskin kan ha.

3. Hover-funksjonen

Spørringsfunksjonen for svevemedier evaluerer om den primære inndatamekanismen til en enhet er i stand til å sveve over elementene i et brukergrensesnitt.

Bruke svevefunksjonen

 /* CSS */
 en{
 tekst-dekorasjon: ingen;
 farge svart;
 }
 @media (sveve: sveve) {
 a: hover {
 farge: blå;
 }
 }
 HTML 
 Et lenkeelement

Koden ovenfor vil vise en element. Den vil endre farge (fra svart til blå) når den primære inngangsmekanismen til en enhet (som støtter sveving) svever over den.

4. En hvilken som helst-hover-funksjon

De hvor som helst mediesøk retter seg mot enhver inndatamekanisme, inkludert den primære inndatamekanismen.

Bruk av funksjonen for hvilken som helst sveve

@media (hvor som helst: hover) {
 a: hover {
 farge: blå;
 }
 }

Mediespørringen ovenfor produserer en hover-effekt for enhver inndatamekanisme som er i stand til å sveve over et element.

5. Oppløsningsfunksjonen

Oppløsningsmediespørringsfunksjonen beregner antall piksler som vises av en bestemt enhet. En enhet som viser flere piksler per tomme har en bedre oppløsning fordi den viser bilder med flere detaljer. Denne funksjonen kan hjelpe en utvikler med å bestemme hvilken enhetsbrukere som kan se elementer i et brukergrensesnitt klarere.

Oppløsningsfunksjonen bruker rekkevidde. Dette betyr at i tillegg til å bruke Vedtak nøkkelord, kan du bruke min oppløsning og maks oppløsning. Mediespørringsoppløsningsfunksjonen tilhører oppløsningsdatatypen. Dette betyr at oppløsningsfunksjonen kan måles i en av tre enheter: punkter per tomme (dpi), punkter per centimeter (dpcm), eller punkter per piksel (dppx).

Bruke oppløsningsfunksjonen

/* CSS */
@media (min. oppløsning: 72dpi) {
 p {
 farge: hvit;
 bakgrunnsfarge: blå;
 }
}
 HTML 

 Lorem ipsum dolor sit, amet consectetur adipisicing elit.

Den laveste oppløsningen en enhet kan ha og fortsatt vise kvalitetsbilder er 72 dpi. Så hvis en enhet har en oppløsning på 72 dpi eller mer, vil den vise følgende utgang i nettleseren:

6. Orienteringsfunksjonen

En enhetsvisningsport kan bare ha én av to retninger: portrett eller landskap. Du bør merke deg at en viewport-retning er forskjellig fra en enhetsorientering. Hvis en enhet bruker et mykt tastatur, kan visningsporten endres fra stående til liggende mens selve enheten fortsatt er i stående posisjon.

Bruke orienteringsfunksjonen

/* CSS */
 kropp{
 display: flex;
 }
 seksjon{
 kantlinje: 2px solid blå;
 polstring: 3px;
 margin: 3px;
 }
 @media (retning: landskap) {
 kropp {
 flex-retning: rad;
 }
 }
@media (retning: portrett) {
 kropp {
 flex-retning: kolonne;
 }
 }
 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 ovenfor endrer oppsettet til en nettsidebase etter orienteringen til en enhet.

En enhet med en viewport i liggende modus vil vise følgende nettside:

En enhet med en viewport i portrettmodus vil vise følgende nettside:

7. Høydefunksjonen

Høydemediespørringsfunksjonen lar deg spesifisere CSS-stil basert på visningsporthøyden til en brukers enhet. Denne funksjonen støtter rekkevidde, så du kan også bruke min-høyde og maks-høyde søkeord.

Bruke høydefunksjonen

 /* CSS */
 @media (min-høyde: 360px) {
 p{
 kantlinje: 2px prikket oransjerød;
 }
}
 HTML 

 Lorem ipsum dolor sit amet consectetur adipisicing elit.

Koden ovenfor tilpasser hva en bruker ser basert på høyden på enheten deres. Brukere med en enhetshøyde på 360 piksler og oppover vil se noe som ligner på følgende nettside:

Enheter med en høyde under 360 piksler vil ikke vise rammen rundt avsnittet på nettsiden.

8. Breddefunksjonen

Mediespørringsfunksjonen for bredde lar deg lage spesifikk CSS-stil basert på visningsportbredden til en brukers enhet. Denne funksjonen støtter også rekkevidde, så du har muligheten til å bruke min bredde og maks bredde søkeord.

Bruke breddefunksjonen

 /* CSS */
 @media (min-bredde: 600px) {
 p{
 kantlinje: 2px solid lilla;
 }
}
 HTML 

 Lorem ipsum dolor sit amet consectetur adipisicing elit.

Koden ovenfor tilpasser hva en bruker ser basert på bredden på enheten deres. Brukere med en enhetsbredde på 600 piksler og mer vil se noe sånt som følgende nettside:

Å bruke bredde- og høydebaserte mediespørringer kan være en effektiv strategi i gjør nettstedet ditt responsivt.

9. Fargefunksjonen

Fargemediespørringsfunksjonen evaluerer en enhets fargekomponent (rød, grønn, blå). Verdien refererer til hvor mange biter en displaye bruker for hver komponent, som definerer hvor mange forskjellige farger den kan vise. Moderne enheter bruker vanligvis en 24-bits skjerm som bruker åtte biter per fargekomponent. Det tar også en heltallsverdi, der en fargeløs enhet er null.

Fargefunksjonen bruker også min-farge og maks-farge områder.

Bruke fargefunksjonen

 /* CSS */
 @media (min-farge: 7) {
 p{
 kantlinje: 2px solid grønn;
 }
}
 HTML 

 Lorem ipsum dolor sit amet consectetur adipisicing elit.

Enheter med en fargekomponent på syv og oppover vil vise følgende utdata i nettleserne:

Nå kan du lage unike brukeropplevelser

Du bør kunne bruke disse avanserte mediespørringene for å forbedre opplevelsen til hver bruker som besøker nettstedet eller applikasjonen din. Det er viktig å gi mobilbrukere og datamaskinbrukere en like positiv opplevelse på nettstedet ditt.

Mediespørringer er ikke de eneste CSS-verktøyene som kan styrke utviklerferdighetene dine.

8 essensielle CSS-tips og triks alle utviklere bør vite

Les Neste

Om forfatteren