Hur skriver du en CSS-mediefråga?

@media skärm och (min bredd: 1000 pixlar) {}

Detta är syntaxen för en mediefråga. Det börjar med @media för att upprätta mediefrågan själv. Ställ sedan in medietypen, som i det här fallet är skärm. Denna typ gäller för stationära datorskärmar, surfplattor, telefoner etc. Avsluta mediefrågan med mediefunktion. I vårt exempel ovan är det mellanbredd: 1000 pixlar. Det betyder att mediefrågan börjar för skärmar med en bredd på minst 1000 pixlar.

Efter dessa element i mediefrågan, lägg till en öppnings- och stängningslock som liknar vad du skulle göra i alla normala CSS-regler.

Det sista steget till en mediefråga är att lägga till CSS-regler som ska tillämpas efter att detta villkor är uppfyllt. Infoga dessa CSS-regler mellan de lockiga hängslen som utgör Media Query, så här:

 @media-skärm och (min-bredd: 1000px) {body {font-size: 20px; }

När villkoren för Media Query är uppfyllda (webbläsarfönstret är minst 1000 pixlar brett), är denna CSS-stil träder i kraft och ändrar vår webbplats teckenstorlek från de 16 pixlar som vi ursprungligen skapade till vårt nya värde på 20 pixlar. 





instagram viewer
 Lägga till fler stilar 

Placera så många CSS regler inom denna mediefråga efter behov för att justera din webbplats visuella utseende. Till exempel, för att inte bara öka teckensnittsstorleken till 20 pixlar utan också ändra färgen på alla stycken till svart (# 000000), lägg till detta: 
@media skärm och (min bredd: 1000px) {
kropp {
teckenstorlek: 20 pixlar;
}
p {
färg: # 000000;
}
}
 Lägga till fler mediefrågor 

Dessutom kan du lägga till fler mediefrågor för alla större storlekar och infoga dem i ditt stilark så här: 
@media skärm och (min bredd: 1000px) {
kropp {
teckenstorlek: 20 pixlar;
}
p {
färg: # 000000;
{
}
@media skärm och (min bredd: 1400 pixlar) {
kropp {
teckenstorlek: 24 pixlar;
}
}

De första mediefrågorna börjar med 1000 pixlar i bredd och ändrar teckensnittsstorleken till 20 pixlar. Sedan, när webbläsaren var över 1400 pixlar, skulle teckenstorleken ändras igen till 24 pixlar. Lägg till så många mediefrågor som behövs för din specifika webbplats. 
 Min bredd och max bredd 

Det finns vanligtvis två sätt att skriva mediefrågor - genom att använda min bredd eller med maximal bredd. Hittills har vi sett min bredd i aktion. Detta tillvägagångssätt aktiverar mediefrågor efter att en webbläsare når minst den minsta bredden. Så en fråga som använder min bredd: 1000 pixlar gäller när webbläsaren är minst 1000 pixlar bred. Den här typen av mediefråga används när du bygger en webbplats på ett mobilt första sätt. 

Om du använder maximal bredd, det fungerar på motsatt sätt. En mediefråga om "max-width: 1000px" gäller efter att webbläsaren har fallit under denna storlek. 

Citerar denna artikel.