Ako píšete mediálny dopyt CSS?

@media obrazovka a (minimálna šírka: 1 000 pixelov) {}

Toto je syntax mediálneho dotazu. Začína sa to @media na založenie samotného mediálneho dotazu. Ďalej nastavte typ média, čo je v tomto prípade obrazovka. Tento typ sa vzťahuje na obrazovky stolových počítačov, tablety, telefóny atď. Ukončite mediálny dopyt znakom mediálna funkcia. V našom príklade vyššie to je stredná šírka: 1 000 pixelov. To znamená, že Media Query sa spustí pri displejoch so šírkou minimálne 1 000 pixelov.

Po týchto prvkoch dotazu na médiá pridajte otváraciu a zatváraciu zloženú zátvorku podobnú tomu, čo by ste urobili v ktoromkoľvek normálnom pravidle CSS.

Posledným krokom k mediálnemu dotazu je pridanie pravidiel CSS, ktoré sa použijú po splnení tejto podmienky. Vložte tieto pravidlá CSS medzi zložené zátvorky, ktoré tvoria dopyt médií, napríklad takto:

 @media obrazovka a (minimálna šírka: 1 000 pixelov) {body {veľkosť písma: 20 pixelov; }





instagram viewer

Ak sú splnené podmienky dotazu na médiá (okno prehliadača je široké najmenej 1 000 pixelov), použije sa tento štýl CSS nadobudne účinnosť zmena veľkosti písma na našej stránke zo 16 pixelov, ktoré sme pôvodne určili, na novú hodnotu 20 pixelov. 
 Pridávanie ďalších štýlov 

Umiestnite toľko Pravidlá CSS v rámci tohto mediálneho dopytu podľa potreby upravte vizuálny vzhľad svojho webu. Napríklad ak chcete nielen zväčšiť veľkosť písma na 20 pixelov, ale tiež zmeniť farbu všetkých odsekov na čiernu (# 000000), pridajte toto: 
@media obrazovka a (minimálna šírka: 1 000 pixelov) {
telo {
veľkosť písma: 20px;
}
p {
farba: # 000000;
}
}
 Pridanie ďalších mediálnych otázok 

Ďalej môžete pridať ďalšie dotazy na médiá pre každú väčšiu veľkosť a vložiť ich do šablóny so štýlmi takto: 
@media obrazovka a (minimálna šírka: 1 000 pixelov) {
telo {
veľkosť písma: 20px;
}
p {
farba: # 000000;
{
}
@media obrazovka a (minimálna šírka: 1400 pixelov) {
telo {
veľkosť písma: 24px;
}
}

Prvé dotazy na médiá sa začali zobrazovať pri šírke 1 000 pixelov a veľkosť písma sa zmenila na 20 pixelov. Keď by potom prehľadávač dosiahol viac ako 1 400 pixelov, veľkosť písma by sa opäť zmenila na 24 pixelov. Pridajte toľko mediálnych dotazov, koľko potrebujete pre váš konkrétny web. 
 Minimálna a maximálna šírka 

Spravidla existujú dva spôsoby písania dotazov na médiá - pomocou min. šírka alebo s max-šírka. Doteraz sme videli minimálnu šírku v akcii. Tento prístup aktivuje mediálne dotazy potom, čo prehľadávač dosiahne aspoň túto minimálnu šírku. Takže dopyt, ktorý používa min. šírka: 1 000 pixelov platí, ak má prehliadač šírku najmenej 1 000 pixelov. Tento štýl dotazu na médiá sa používa, keď staviate web mobilným spôsobom. 

Ak používate max-šírka, funguje to opačne. Po poklese prehľadávača pod túto veľkosť sa použije mediálny dopyt „max-width: 1000px“. 

Citujte tento článok.