Jak píšete CSS Media Query?

@media obrazovka a (min. šířka: 1 000px) {}

Toto je syntaxe mediálního dotazu. Začíná to @media k založení samotného Media Query. Dále nastavte typ média, což je v tomto případě obrazovka. Tento typ platí pro obrazovky stolních počítačů, tablety, telefony atd. Ukončete mediální dotaz pomocí mediální funkce. V našem příkladu výše to je střední šířka: 1000px. To znamená, že Media Query začíná u displejů s minimální šířkou 1 000 pixelů.

Po těchto prvcích Media Query přidejte úvodní a závěrečnou složenou závorku podobnou tomu, co byste udělali v jakémkoli normálním pravidle CSS.

Posledním krokem k Media Query je přidání pravidel CSS, která se použijí po splnění této podmínky. Vložte tato pravidla CSS mezi složené závorky, které tvoří Media Query, například takto:

 @media screen a (min-width: 1000px) {body {font-size: 20px; }

Pokud jsou splněny podmínky Media Query (okno prohlížeče je široké alespoň 1 000 pixelů), tento styl CSS se projeví změnou velikosti písma našich stránek ze 16 pixelů, které jsme původně vytvořili, na novou hodnotu 20 pixelů. 





instagram viewer
 Přidání více stylů 

Umístěte tolik Pravidla CSS v rámci tohoto mediálního dotazu podle potřeby upravte vizuální vzhled svého webu. Chcete-li například nejen zvětšit velikost písma na 20 pixelů, ale také změnit barvu všech odstavců na černou (# 000000), přidejte toto: 
@media obrazovka a (min. šířka: 1000px) {
tělo {
velikost písma: 20px;
}
p {
barva: # 000000;
}
}
 Přidání dalších mediálních dotazů 

Dále můžete přidat další dotazy na média pro každou větší velikost a vložit je do šablony stylů takto: 
@media obrazovka a (min. šířka: 1000px) {
tělo {
velikost písma: 20px;
}
p {
barva: # 000000;
{
}
@media obrazovka a (min. šířka: 1400px) {
tělo {
velikost písma: 24px;
}
}

První dotazy na média začínají na šířce 1000 pixelů a mění velikost písma na 20 pixelů. Poté, co prohlížeč překročil 1400 pixelů, se velikost písma znovu změní na 24 pixelů. Přidejte tolik mediálních dotazů, kolik potřebujete pro váš konkrétní web. 
 Min. Šířka a Max. Šířka 

Obecně existují dva způsoby psaní mediálních dotazů - pomocí min. šířka nebo s maximální šířka. Zatím jsme viděli min. Šířku v akci. Tento přístup aktivuje dotazy médií poté, co prohlížeč dosáhne alespoň této minimální šířky. Takže dotaz, který používá min. šířka: 1000px platí, když je prohlížeč široký alespoň 1 000 pixelů. Tento styl Media Query se používá, když vytváříte web mobilním způsobem. 

Pokud používáte maximální šířka, funguje to opačně. Poté, co prohlížeč klesne pod tuto velikost, bude platit mediální dotaz „max-width: 1000px“. 

Citujte tento článek.