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: 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: Her: 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 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.
bakgrunnsfarge: grønn;
kropp
Bakgrunnsfarge: LightskyBlues;
Farge: RGB (226, 12, 12);
Igjen, tilgang til kroppen og bruk “bakgrunnsfarge" en gang til:
bakgrunnsfarge: RGB (235, 185, 23);
@media bare skjerm og (maks bredde: 400px)
kropp
bakgrunnsfarge: RGB (17, 97, 202);