Hvordan skriver du et CSS-mediespørsmål?

@media-skjerm og (min bredde: 1000 px) {}

Dette er syntaksen til en mediespørring. Det starter med @media å etablere mediespørringen selv. Deretter angir du medietypen, som i dette tilfellet er skjerm. Denne typen gjelder for stasjonære dataskjermer, nettbrett, telefoner osv. Avslutt mediespørringen med mediefunksjon. I vårt eksempel ovenfor er det midtbredde: 1000 px. Dette betyr at mediespørringen starter for skjermer med en bredde på minst 1000 piksler.

Etter disse elementene i mediespørringen, legg til en krølling som åpner og lukker, lik det du ville gjort i en hvilken som helst normal CSS-regel.

Det siste trinnet i en mediespørring er å legge til CSS-reglene som skal brukes etter at denne vilkåret er oppfylt. Sett inn disse CSS-reglene mellom de krøllete selene som utgjør Media Query, slik:

 @media-skjerm og (min bredde: 1000 piksler) {body {font-size: 20px; }

Når vilkårene for mediespørringen er oppfylt (nettleservinduet er minst 1000 piksler bredt), er denne CSS-stilen trer i kraft og endrer skriftstørrelsen på nettstedet vårt fra de 16 pikslene vi opprinnelig opprettet til vår nye verdi på 20 piksler. 





instagram viewer
 Legge til flere stiler 

Plasser så mange CSS regler innen denne mediespørringen etter behov for å justere nettstedets visuelle utseende. For eksempel, for å ikke bare øke skriftstørrelsen til 20 piksler, men også endre fargen på alle avsnitt til svart (# 000000), legg til dette: 
@media-skjerm og (min bredde: 1000 px) {
kropp {
skriftstørrelse: 20px;
}
p {
farge: # 000000;
}
}
 Legge til flere mediespørsmål 

I tillegg kan du legge til flere mediespørringer for alle større størrelser og sette dem inn i stilarket ditt slik: 
@media-skjerm og (min bredde: 1000 px) {
kropp {
skriftstørrelse: 20px;
}
p {
farge: # 000000;
{
}
@media-skjerm og (min bredde: 1400 px) {
kropp {
skriftstørrelse: 24px;
}
}

De første mediespørsmålene begynner med 1000 piksler bredde, og endrer skriftstørrelsen til 20 piksler. Så, når nettleseren var over 1400 piksler, ville skriftstørrelsen endres igjen til 24 piksler. Legg til så mange mediespørsmål du trenger for nettstedet ditt. 
 Min bredde og maks bredde 

Det er vanligvis to måter å skrive mediespørsmål på - ved å bruke min bredde eller med maks bredde. Så langt har vi sett min bredde i aksjon. Denne tilnærmingen aktiverer mediespørsmål etter at en nettleser når minst den minste bredden. Så et spørsmål som bruker min bredde: 1000 px gjelder når nettleseren er minst 1000 piksler bred. Denne stilen til mediespørring brukes når du bygger et nettsted på en mobil-første måte. 

Hvis du bruker maks bredde, det fungerer på motsatt måte. En mediespørring på "max-width: 1000px" gjelder etter at nettleseren har falt under denne størrelsen. 

Sitere denne artikkelen.