Hvordan skriver du en CSS-medieforespørgsel?

@media-skærm og (min. bredde: 1000 px) {}

Dette er syntaksen for en medieforespørgsel. Det starter med @medier at etablere medieforespørgslen selv. Indstil derefter medietypen, som i dette tilfælde er skærm. Denne type gælder for computerskærme, tablets, telefoner osv. Afslut medieforespørgslen med mediefunktion. I vores eksempel ovenfor er det mellembredde: 1000 px. Dette betyder, at medieforespørgslen starter for skærme med en bredde på mindst 1000 pixels.

Efter disse elementer i medieforespørgslen skal du tilføje en åbnings- og lukningsbøjle svarende til hvad du ville gøre i enhver normal CSS-regel.

Det sidste trin til en medieforespørgsel er at tilføje de CSS-regler, der skal anvendes, når denne betingelse er opfyldt. Indsæt disse CSS-regler mellem de krøllede seler, der udgør Media Query, på denne måde:

 @media-skærm og (min. bredde: 1000 px) {body {font-size: 20px; }





instagram viewer

Når betingelserne i medieforespørgslen er opfyldt (browservinduet er mindst 1000 pixels bredt), er denne CSS-stil træder i kraft og ændrer vores websteds skriftstørrelse fra de 16 pixels, vi oprindeligt oprettede, til vores nye værdi på 20 pixels. 
 Tilføjelse af flere stilarter 

Placer så mange CSS regler inden for denne medieforespørgsel efter behov for at justere dit websteds visuelle udseende. For eksempel for ikke kun at øge skriftstørrelsen til 20 pixels, men også ændre farven på alle afsnit til sort (# 000000), tilføj dette: 
@media-skærm og (min. bredde: 1000 px) {
krop {
skriftstørrelse: 20 px;
}
p {
farve: # 000000;
}
}
 Tilføjelse af flere medieforespørgsler 

Derudover kan du tilføje flere medieforespørgsler til alle større størrelser og indsætte dem i dit typografiark på denne måde: 
@media-skærm og (min. bredde: 1000 px) {
krop {
skriftstørrelse: 20 px;
}
p {
farve: # 000000;
{
}
@media-skærm og (min bredde: 1400 pixel) {
krop {
skriftstørrelse: 24 pixel;
}
}

De første medieforespørgsler begynder med 1000 pixels i bredden og ændrer skriftstørrelsen til 20 pixels. Derefter, når browseren var over 1400 pixels, ville skriftstørrelsen ændre sig igen til 24 pixels. Tilføj så mange medieforespørgsler, som det er nødvendigt til dit bestemte websted. 
 Min. Bredde og maks. Bredde 

Der er generelt to måder at skrive medieforespørgsler på - ved hjælp af min bredde eller med maks. bredde. Indtil videre har vi set min bredde i aktion. Denne tilgang aktiverer medieforespørgsler, når en browser når mindst den mindste bredde. Så en forespørgsel, der bruger min. bredde: 1000 px gælder, når browseren er mindst 1000 pixels bred. Denne stil medieforespørgsel bruges, når du bygger et websted på en mobil-første måde. 

Hvis du bruger maks. bredde, det fungerer på den modsatte måde. En medieforespørgsel på "max-width: 1000px" gælder, når browseren er faldet under denne størrelse. 

Citer denne artikel.