Når du designer et responsivt nettsted, ønsker nettutvikleren å endre strukturen til nettoppsettet basert på enheten som bruker den. CSS lar brukerne sine utføre denne oppgaven ved å bruke @Media -regelen som benytter seg av medier for å endre utseendet til et nettsted som tilsvarer enhetstypen. For å forstå hva denne regelen er, les følgende innlegg. Fagene som fremheves i innlegget er som følger.

1. @Media Rule
2. Syntaks av @Media -regelen
3. Typer CSS -medier
4. Typer mediefunksjoner

@Media Rule

For å endre utseendet til en webside basert på enheten, eller media som viser den, brukes @media -regelen. Denne regelen benytter seg av media -spørsmålene for å utføre den nevnte oppgaven. Denne regelen viser seg å være til stor nytte når du utvikler et responsivt nettsted.

Syntaks av @Media -regelen

Den har følgende syntaks.

Nøkkelord forklart

ikke: Det reverserer semantikken i en medieforespørsel.

bare: Det forhindrer de gamle versjonene av en nettleser i å implementere media -spørringen.

og: Den kombinerer en medietype med en viss mediefunksjon.

Typer CSS media

Det er totalt fire medietyper som vi har gitt nedenfor.

alle

Det er aktuelt for alle slags medieenheter.

skrive ut

Denne spørringen brukes spesielt til skrivere.

skjerm

Det brukes til skjermer av forskjellige enhetstyper som datamaskiner, bærbare datamaskiner, mobiltelefoner osv.

tale

Denne spørringen brukes spesielt til skjermlesere.

Typer mediefunksjoner

Vi har beskrevet noen av mediefunksjonene her.

1. NOEN-HOVER

Denne funksjonen ble inkludert i mediers spørsmål Nivå 4 og spesifiserer at hvis en gitt inngangsmekanisme lar brukeren sveve over elementene.

hvilken som helst peker

Dette ble også inkludert i mediespørsmål nivå 4 og sier at hvis en gitt inngangsmekanisme er en pekeenhet, og i så fall, så er det hvor presis er det?

størrelsesforholdet

Denne funksjonen definerer forholdet mellom utsiktshjulets bredde og høyden.

farge

Denne funksjonen spesifiserer komponentene i fargene på utgangsenhetene.

Fargekamut

Dette definerer området farger som vil bli støttet av utgangsenheter.

fargeindeks

Den sier antall farger en gitt enhet kan vises.

Nett

Størrelsen på kolonner og rader er spesifisert av nettfunksjonen.

høyde

Dette definerer høyden på visningsporten.

sveve

For å tillate brukere å sveve over HTML -elementer, brukes Hover -funksjonen.

inverterte farger

Dette spesifiserer om utgangsenheten inverterer farger eller ikke.

Lysnivå

Som navnet antyder, definerer det lysnivået.

Max-Aspect-forhold

Maksimumsforholdet mellom bredde og høyde er spesifisert av denne funksjonen.

Maksfarge

Det meste antall biter per fargeenheter av utgangsenhetene er oppgitt av denne funksjonen.

Maks-farge-indeks

Denne funksjonen sier de maksimale fargene en enhet kan vises.

maksimal

Denne funksjonen definerer maksimal høyde på nettleseren.

Maks-monokrom

Det meste antall biter per fargeenheter av et monokrom verktøy er oppgitt av denne funksjonen.

Min-oppløsning

Minimumsoppløsningen til utgangsenheten er spesifisert av Min-oppløsningsfunksjonen.

Min-bredde

Denne funksjonen definerer minimumsbredden på nettleseren.

monokrom

Denne funksjonen sier det maksimale antallet biter per fargekomponent i en monokrom enhet.

orientering

Den definerer om orienteringen til Viewport er portrett eller landskap.

Overflow-block

Den håndterer scenariene der innholdet på websiden strømmer over Viewport.

Overflow-inline

Den håndterer scenariene der innholdet på websiden strømmer over Viewport over inline -aksen.

peker

En grunnleggende inngangsmekanisme for pekende enheter.

Vedtak

Den sier oppløsningen til enheten (i DPI eller DPCM)

skanne

Det skanner utgangsenhetene.

skripting

Det sjekker om noen skripting som JavaScript er tilgjengelig eller ikke.

Oppdater

Den oppdaterer utdataenhetene raskt.

bredde

Viewport -bredden er definert av denne funksjonen.

Nedenfor har vi presentert deg et eksempel slik at du kan forstå @media -regelen på en bedre måte.

Eksempel

Eksemplet nedenfor viser @media -regelen.

Html

Css @media -regel

For å endre utseendet til en webside basert på enheten, eller media som viser den, brukes @media -regelen. Denne regelen benytter seg av media -spørsmålene for å utføre den nevnte oppgaven. Denne regelen viser seg å være til stor nytte når du utvikler et responsivt nettsted.

Her har vi definert to elementer som er

og

. Vi vil bruke noen medieregler på disse elementene.

CSS

H1, P
Font-Family: 'Times New Roman', Times, Serif;
Font-størrelse: 16px;
Font-stil: normal;

@Media-skjerm og (min bredde: 720px)
P
Font-Family: Verdana, Genève, Tahoma, Sans-Serif;
Font-størrelse: 25px;
Font-stil: kursiv;

I koden ovenfor har vi spesifisert at både overskriften og avsnittet vil ha Verdana fontfamilie, en skriftstørrelse på 25px og en kursiv fontstil hvis minimum skjermbredde på enheten er 720px eller bredere. Imidlertid, hvis skjermbredden er mindre enn 720px, vil fontfamilien være ganger ny romersk, skriftstørrelse 16px og skriftstil normal.

Produksjon

Når skjermbredden er 720px eller bredere.

Når skjermbredden er mindre enn 720px.

@Media -regelen ble implementert vellykket.

Konklusjon

@Media -regelen brukes til å endre utseendet til en webside basert på enheten, eller media som viser den. Regelenes syntaks sier at medietypen skal defineres sammen med visse mediefunksjoner og benytter seg av noen operatører. Dessuten er det fire typer som er; alle, skjerm, utskrift og tale. Videre er det mange mediefunksjoner som bredde, monokrom, høyde, overløpsblokk osv. Dette innlegget forklarer dypt @media -regelen, sammen med syntaks, medietyper og mediefunksjoner.