Media -spørsmål i CSS | Forklart
Denne oppskrivningen kommer til å presentere en omfattende guide for CSS media-spørsmålene, og den vil bli organisert som følger:
- Hva er CSS -medier?
- Grunnleggende syntaks
- Hvorfor mediespørsmål brukes
- Typer medier
- Praktisk implementering av CSS Media -spørsmål
Så la oss starte!
Hva er media CSS -spørsmål?
Media -spørring lar oss lage forskjellige oppsett avhengig av visningens størrelse. For eksempel kan medieforespørsler oppdage om brukeren bruker en mus eller en berøringsskjerm osv.
Listen nedenfor presenterer forskjellige ting som en CSS Media Query sjekker:
- Viewports høyde og bredde.
- Enhetens høyde og bredde.
- Vedtak.
- Enhetens orientering i.e. portrett eller landskap.
Alt i alt kan vi si at medieforespørsler er veldig nyttige for å oppdage de forskjellige aspektene relatert til miljøet som nettstedet kjører.
Grunnleggende syntaks
Den grunnleggende syntaksen til medieforespørsler består av flere ting som medietype (i.e. skjerm, alt osv.), en enkelt eller flere uttrykk. Media -spørringen vil alltid bli initiert med “@media”. “Media type”Kan kombineres med uttrykkene) Ved å bruke en logisk operatør er det imidlertid valgfritt:
@Media MediaType og (uttrykk/uttrykk)/ * Kode/CSS -regler */
En medieforespørsel i CSS er en logisk operasjon Derfor blir den relaterte CSS når det blir sant, og vil bli brukt på målelementet.
Hvorfor mediespørsmål brukes
Medieforespørsler brukes til å gi et tilpasset utseende til et nettsted for forskjellige enheter som bærbare datamaskiner, stasjonære maskiner, mobiltelefoner osv. Så vi kan si at medieforespørsler brukes til å lage nye CSS -regler eller for å overstyre de eksisterende CSS for å presentere et responsivt nettsted.
Typer medier
Det er fire typer CSS -medier som kan brukes til forskjellige formål som oppført nedenfor:
| Media type | Beskrivelse |
|---|---|
| alle | Brukt til alle medietyper i.e. skjerm, utskrift, tale |
| skjerm | Brukes til skjermer som mobiltelefoner, bærbare datamaskiner osv. |
| skrive ut | Bare brukes til skrivere. |
| tale | Brukt til skjermlesing |
Praktisk implementering av CSS Media -spørsmål
Per nå har vi en grunnleggende ide om hva en medieforespørsel er, dens syntaks, hvorfor vi skal bruke den, og hva er de forskjellige typene CSS Media -spørsmål. Og nå for en dyp forståelse, vil vi implementere disse teoretiske begrepene i et praktisk scenario.
Eksempel
I dette eksemplet skal vi lage tre avsnitt og en overskrift, og vi vil sette kroppens bakgrunnsfarge og tekstjustering som lysegrå og senter henholdsvis. Dessuten vil vi bruke mediespørsmålene for å endre bakgrunnsfarge og tekstjustering til himmelblått og venstre som vil komme i aksjon når skjermstørrelsen vil være bredere enn eller lik 360 piksler:
Media spørsmål
Bakgrunnsfarge på kroppen er lysegrå
Bakgrunnsfarge vil bli endret fra lysegrå til himmelblå hvis utsiktsporten er bredere enn 360 piksler
Det undergitte utdraget vil vise arbeidet med CSS-medieforespørsler:
Fra utgangen er det klart at bakgrunnsfargen til å begynne med var lysegrå og tekst ble justert i midten, fordi skjermens bredde på den tiden var mindre enn 360. Men når vi endret (større enn 360), ble skjermens bredde imidlertid modifisert bakgrunnsfarge og tekstjustering til himmelblå farge og venstre justering.
Konklusjon
Media -spørsmål brukes til å tilpasse nettstedets presentasjon i henhold til brukerens skjermstørrelse. Ved hjelp av medier kan vi vise de forskjellige markeringene avhengig av enhetens type (mobil, nettbrett, skrivebord). I CSS er medieforespørsler en logisk operasjon, og når det blir sant, vil den relaterte CSS bli brukt på målelementet. Denne oppskrivningen presenterer en detaljert forståelse av CSS-medier og for bedre forståelse gir den kodebit sammen med respektive utganger.