9 avancerede CSS-tricks til medieforespørgsler, du bør kende

En brugbar, tilgængelig oplevelse er afgørende for en succesfuld hjemmeside. Hvis dine læsere har en positiv oplevelse, er der større sandsynlighed for, at de udfører en opfordring til handling, herunder køb af produkter. De er også mere tilbøjelige til at vende tilbage eller anbefale dit websted til andre. Erfaring er nøglen.

Medieforespørgsler tilbyder forskellige CSS-funktioner, der kan tilpasse dit websted. De lader dig skræddersy hver brugers oplevelse baseret på deres enheds muligheder. Lær, hvordan du giver dine læsere den bedste oplevelse, uanset om de bruger deres telefon eller en stor skrivebordsskærm.

1. Pointerfunktionen

Det @medieregel har en markørfunktion, der giver dig mulighed for at tilpasse dit design baseret på det primære pegeredskab. Du kan teste for tilgængelighed og kvalitet.

Denne pointer medieforespørgselsfunktion tager en af ​​tre værdier: ingen, grov eller fin. Det ingen værdien gælder, når der ikke er noget pegeredskab. Det grov værdien gælder, når det primære pegeredskab har et forringet niveau af nøjagtighed. Og

bøde værdien gælder, når det primære pegeredskab har et højt niveau af nøjagtighed.

Brug af markørfunktionen

Valgmuligheder at vælge imellem: 
 Mulighed 1
 Mulighed to

Ovenstående kode genererer to inputradioindstillinger, som vil variere baseret på nøjagtigheden af ​​en computers primære pegeenhed.

En computer, der har en nøjagtig (eller høj kvalitet) primær pegeenhed, vil vise følgende webside:

En computer, der har en primær enhed med begrænset nøjagtighed (eller lav kvalitet), vil vise følgende webside:

Enheden, der har et primært pegeredskab med et begrænset niveau af nøjagtighed, har større radioknapper. Dette giver en bedre brugeroplevelse for sådanne brugere. Med pointer-funktionen kan du sikre, at alle dine brugere får en behagelig oplevelse, uanset deres enhed.

2. Enhver-pointer-funktionen

Ligesom markørfunktionen er funktionen medieforespørgsel med enhver pointer målrettet mod pegeredskaber. Enhver-pege-funktionen evaluerer dog hvert pegeredskab på en computer. Any-pointer-funktionen bruger også ingen, grov, og bøde værdier.

Brug af en hvilken som helst pointer-funktion

 @media (enhver pointer: fint) {
 input[type="radio"] {
 bredde: 15px;
 højde: 15px;
 kant-radius: 20px;
 kant-bredde: 1px;
 }
 }
@media (enhver pointer: groft) {
 input[type="radio"] {
 bredde: 25px;
 højde: 25px;
 kant-radius: 20px;
 kant-bredde: 2px;
 }
 }

Du kan blot erstatte koden ovenfor med medieforespørgselssektionen i koden i markørfunktionseksemplet. Ovenstående kode giver en passende visning baseret på kvaliteten af ​​enhver pegeenhed, som en computer måtte have.

3. Svævefunktionen

Svævemedieforespørgselsfunktionen evaluerer, om en enheds primære inputmekanisme er i stand til at svæve over elementerne i en brugergrænseflade.

Brug af svævefunktionen

 /* CSS */
 en{
 tekst-dekoration: ingen;
 farve: sort;
 }
 @media (hover: hover) {
 a: hover {
 farve: blå;
 }
 }
 HTML 
 Et linkelement

Koden ovenfor vil vise en element. Den skifter farve (fra sort til blå), når den primære inputmekanisme på en enhed (der understøtter svævning) svæver over den.

4. Enhver-hover-funktionen

Det enhver-hover medieforespørgsel retter sig mod enhver inputmekanisme, inklusive den primære inputmekanisme.

Brug af enhver-hover-funktionen

@media (any-hover: hover) {
 a: hover {
 farve: blå;
 }
 }

Medieforespørgslen ovenfor producerer en hover-effekt for enhver inputmekanisme, der er i stand til at svæve over et element.

5. Opløsningsfunktionen

Opløsningsmedieforespørgselsfunktionen beregner antallet af pixels, der vises af en bestemt enhed. En enhed, der viser flere pixels pr. tomme, har en bedre opløsning, fordi den viser billeder med flere detaljer. Denne funktion kan hjælpe en udvikler med at beslutte, hvilken enhed brugere kan se elementer i en brugergrænseflade mere tydeligt.

Opløsningsfunktionen bruger rækkevidde. Det betyder, at såvel som at bruge løsning søgeord, du kan bruge min-opløsning og max-opløsning. Medieforespørgselsopløsningsfunktionen hører til opløsningsdatatypen. Det betyder, at opløsningsfunktionen kan måles i en af ​​tre enheder: dots per inch (dpi), dots per centimeter (dpcm) eller dots per pixels (dppx).

Brug af opløsningsfunktionen

/* CSS */
@media (min. opløsning: 72dpi) {
 p {
 farve: hvid;
 baggrundsfarve: blå;
 }
}
 HTML 

 Lorem ipsum dolor sit, amet consectetur adipisicing elit.

Den laveste opløsning en enhed kan have og stadig vise kvalitetsbilleder er 72dpi. Så hvis en enhed har en opløsning på 72 dpi eller mere, vil den vise følgende output i sin browser:

6. Orienteringsfunktionen

En enhedsvisningsport kan kun have én af to orienteringer: portræt eller landskab. Du skal bemærke, at en viewport-retning er forskellig fra en enhedsorientering. Hvis en enhed bruger et blødt tastatur, kan dens viewport ændre sig fra stående til liggende, mens selve enheden stadig er i stående position.

Brug af orienteringsfunktionen

/* CSS */
 legeme{
 display: flex;
 }
 afsnit{
 kant: 2px ensfarvet blå;
 polstring: 3px;
 margin: 3px;
 }
 @media (retning: liggende) {
 krop {
 flex-retning: række;
 }
 }
@media (retning: portræt) {
 krop {
 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.

Ovenstående kode ændrer layoutet af en websidebase efter orienteringen af ​​en enhed.

En enhed med en viewport i liggende tilstand vil vise følgende webside:

En enhed med en viewport i portrættilstand vil vise følgende webside:

7. Højden Feature

Højdemedieforespørgselsfunktionen giver dig mulighed for at angive CSS-stil baseret på viewport-højden på en brugers enhed. Denne funktion understøtter rækkevidde, så du kan også bruge min-højde og max-højde søgeord.

Brug af højdefunktionen

 /* CSS */
 @media (min-højde: 360px) {
 p{
 kant: 2px prikket orangerød;
 }
}
 HTML 

 Lorem ipsum dolor sit amet consectetur adipisicing elit.

Koden ovenfor tilpasser, hvad en bruger ser baseret på højden på deres enhed. Brugere med en enhedshøjde på 360px og derover vil se noget, der ligner følgende webside:

Enheder med en højde under 360px viser ikke rammen omkring afsnittet på websiden.

8. Bredden Feature

Breddemedieforespørgselsfunktionen giver dig mulighed for at oprette specifik CSS-styling baseret på viewport-bredden på en brugers enhed. Denne funktion understøtter også rækkevidde, så du har mulighed for at bruge min bredde og max-bredde søgeord.

Brug af breddefunktionen

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

 Lorem ipsum dolor sit amet consectetur adipisicing elit.

Koden ovenfor tilpasser, hvad en bruger ser baseret på bredden af ​​deres enhed. Brugere med en enhedsbredde på 600px og mere vil se noget i stil med følgende webside:

Brug af bredde- og højdebaserede medieforespørgsler kan være en effektiv strategi i gør din hjemmeside responsiv.

9. Farvefunktionen

Farvemedieforespørgselsfunktionen evaluerer en enheds farvekomponent (rød, grøn, blå). Værdien refererer til hvor mange bit en displaye bruger for hver komponent, som definerer hvor mange forskellige farver den kan vise. Moderne enheder bruger typisk en 24-bit skærm, som bruger otte bit pr. farvekomponent. Det tager også en heltalsværdi, hvor en farveløs enhed er nul.

Farvefunktionen bruger også min-farve og max-farve intervaller.

Brug af farvefunktionen

 /* CSS */
 @media (min-farve: 7) {
 p{
 kant: 2px fast grøn;
 }
}
 HTML 

 Lorem ipsum dolor sit amet consectetur adipisicing elit.

Enheder med en farvekomponent på syv og derover vil vise følgende output i deres browsere:

Nu kan du skabe unikke brugeroplevelser

Du bør være i stand til at bruge disse avancerede medieforespørgsler til at forbedre oplevelsen for hver bruger, der besøger dit websted eller din applikation. Det er vigtigt at give mobilbrugere og computerbrugere en lige så positiv oplevelse på dit websted.

Medieforespørgsler er ikke de eneste CSS-værktøjer, der kan styrke dine udviklerevner.

8 essentielle CSS-tip og tricks, som enhver udvikler bør kende

Læs Næste

Om forfatteren