Hva er forskjellen mellom skjerm og eneste skjerm i medier?

Hva er forskjellen mellom skjerm og eneste skjerm i medier?
For å konstruere en responsiv webdesign, brukes en medieforespørsel. Det indikerer at visninger på websiden skiller seg fra system til system avhengig av media eller skjermtype. Medieforespørsler gjør det også mulig å bruke CSS -stiler basert på en enhets generelle art, for eksempel en utskriftsskjerm og andre detaljer, som skjermoppløsning eller bredde på nettleseren Viewport.

Dette innlegget vil forklare hva som skiller “Skjerm” fra “Only Screen” i medier.

Det som skiller “Skjerm” fra “Only Screen” i medier?

skjerm”Brukes for å sette størrelsen på skjermen inne i medieforespørselen. Spesifikt kan skjermstørrelsen settes inn ved å bruke "Maks bredde”Og“Min-bredde”CSS -egenskaper. Størrelsen på skjermen skiller seg fra skjerm til skjerm. Så det "eneste" nøkkelordet er derfor bestemt for å forhindre at tidligere nettlesere bruker de medfølgende stilene, da de ikke håndterer medieforespørsler som inneholder mediefunksjoner.

Hvordan bruke media -spørsmålene “skjerm”?

Å bruke “skjerm”I en medieforespørsel, sjekk ut de listede instruksjonene.

Trinn 1: Sett inn en overskrift

Bruk først HTML -overskriften for å legge til en overskrift i HTML -dokumentet. For eksempel "

Trinn 2: Legg til tekst i avsnitt

Deretter legger du til tekst i avsnittet med hjelp av "

Bruk @Media -regel


Vi har satt bredden på skjermen.

Produksjon

Trinn 3: Bruk styling på "Body" -elementet

Få tilgang til kroppselementet og bruk CSS -egenskapene for styling:

kropp
bakgrunnsfarge: grønn;

For å gjøre det, “bakgrunnsfarge”Eiendom brukes til å fordele en farge på baksiden av elementet.

Trinn 4: Sett “@media -skjerm”

I henhold til våre krav har vi satt bredden på et dokument til “300”Piksler eller mindre. Bakgrunnsfargen er “Lightskyblues”. Hvis ikke, vil det være “grønn”. For å gjøre det, bruk "@Media -skjerm”Og angi skjermens maksimale bredde. Etter det får du tilgang til kroppen og bruk følgende CSS -egenskaper:

@Media-skjerm og (maks bredde: 300px)
kropp
Bakgrunnsfarge: LightskyBlues;
Farge: RGB (226, 12, 12);

Her:

  • Verdien av “bakgrunnsfarge”Er satt som“Lightskyblues”.
  • farge”Eiendom som brukes til å sette fargen for teksten inne i elementet.

Produksjon

Hvordan bruke media -spørsmålene “ONLY SKJERM”?

bare”Søkeord begrenser nettleserne fra å bruke de spesifiserte stilene som ikke støttes av medier med mediefunksjoner. Følg instruksjonene for å bruke "Bare skjerm”I medieforespørsler.

Trinn 1: Stil "kropp"

Få tilgang til kroppen og bruke "bakgrunnsfarge”For å spesifisere fargen på baksiden av elementet på skjermen.

Trinn 2: Bruk media -spørring med "eneste skjerm"

Nå, bruk en medieforespørsel med “Bare skjerm”For å stille skjermens bredde. For å gjøre det, verdien av "Bare skjerm”Eiendom er satt som“400px”.

Trinn 3: Sett "bakgrunnsfarge" -egenskaper

Igjen, tilgang til kroppen og bruk “bakgrunnsfarge" en gang til:

kropp
bakgrunnsfarge: RGB (235, 185, 23);

@media bare skjerm og (maks bredde: 400px)
kropp
bakgrunnsfarge: RGB (17, 97, 202);

Når vi har satt bredden på et dokument til “400”Piksler eller mindre, bakgrunnsfargen er“RGB (17, 97, 202)”. Ellers er det “RGB (235, 185, 23)”.

Produksjon

Det handler om skillet mellom skjermbilde og bare skjermbilde.

Konklusjon

Skillet mellom “Bare skjerm”Og“skjerm”I medieforespørsler er at“skjerm”Er ansatt for å indikere media -spørringens skjermstørrelse. “Maks bredde”Og“Min-bredde”Kan brukes til å kontrollere skjermstørrelsen. Ettersom hver skjerm har en distinkt skjermstørrelse, "bare”Søkeord brukes til å unngå å implementere de spesifiserte stilene i tidligere nettlesere som ikke tillater medieforespørsler. Dette innlegget har forklart skillet mellom “Only Screen” og “Screen” innen medieforespørsler.