Ako napíšete mediálny dopyt CSS?

Poznajte syntax pre dopyty na médiá s minimálnou šírkou a maximálnou šírkou

Responzívny web dizajn je prístup k vytváraniu webových stránok, kde tieto stránky môžu dynamicky meniť svoje rozloženie a vzhľad na základe veľkosti obrazovky návštevníka . Veľké obrazovky dostanú rozloženie vhodné pre tieto väčšie displeje, zatiaľ čo menšie zariadenia, ako sú mobilné telefóny, dostanú rovnakú webovú stránku naformátovanú spôsobom, ktorý je vhodný pre túto menšiu obrazovku. Tento prístup poskytuje lepšiu používateľskú skúsenosť pre všetkých používateľov a môže dokonca pomôcť zlepšiť pozície vo vyhľadávačoch . CSS Media Queries tvoria dôležitú súčasť responzívneho webdizajnu.

Media Queries sú ako malé podmienené príkazy v súbore CSS vášho webu, ktoré vám umožňujú nastaviť určité pravidlá CSS, ktoré sa prejavia až po splnení určitej podmienky – napríklad keď je veľkosť obrazovky nad alebo pod určitými prahmi.

Media Queries sú teraz štandardné, ale veľmi staré verzie Internet Explorera ich nepodporujú.

Media Queries in Action

Začnite s dobre štruktúrovanýmHTML dokumentbez akýchkoľvek vizuálnych štýlov.

V súbore CSS upravte štýl stránky a nastavte základnú líniu toho, ako bude web vyzerať. Ak chcete vykresliť veľkosť písma stránky na 16 pixelov, napíšte to CSS :

|_+_|

Pridanie ďalších mediálnych dopytov

Okrem toho môžete pridať viac dopytov na médiá pre každú väčšiu veľkosť a vložiť ich do hárka so štýlmi takto:

|_+_|

Prvé Media Queries začínajú na šírku 1 000 pixelov a menia veľkosť písma na 20 pixelov. Potom, keď mal prehliadač viac ako 1400 pixelov, veľkosť písma sa opäť zmenila na 24 pixelov. Pridajte toľko mediálnych dopytov, koľko potrebujete pre vašu konkrétnu webovú stránku.

Min-Width a Max-Width

Vo všeobecnosti existujú dva spôsoby písania mediálnych dotazov – pomocou min-šírka alebo s max-šírka . Zatiaľ sme videli min-width v akcii. Tento prístup aktivuje Media Queries potom, čo prehliadač dosiahne aspoň túto minimálnu šírku. Takže dotaz, ktorý používa minimálna šírka: 1 000 pixelov platí, keď je prehliadač široký aspoň 1000 pixelov. Tento štýl Media Query sa používa, keď vytvárate stránky v mobilnom režime.

Ak používate max-šírka , funguje to opačne. Media Query s 'maximálnou šírkou: 1000 pixelov' sa použije, keď prehliadač klesne pod túto veľkosť.