Syntax pre dotazy médií s minimálnou šírkou a maximálnou šírkou
Zodpovedný dizajn webov 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 môžu získať rozloženie prispôsobené tým väčším zobrazeniam, zatiaľ čo menšie zariadenia, ako napríklad mobilné telefóny, môžu prijímať rovnaké webové stránky naformátované spôsobom, ktorý je vhodný pre menšiu obrazovku. Tento prístup poskytuje používateľom lepšie skúsenosti a môže dokonca pomôcť zlepšiť hodnotenie vyhľadávačov . Dôležitou súčasťou zodpovedajúceho dizajnu webových stránok sú CSS Media Queries.
Mediálne dopyty sú ako malé podmienečné vyhlásenia v súbore CSS vašej webovej stránky a umožňujú vám nastaviť určité pravidlá CSS, ktoré sa prejavia iba vtedy, keď sa splní určitá podmienka - napríklad ak je veľkosť obrazovky nad alebo pod určitými prahovými hodnotami.
Media Queries in Action
Takže ako používate Media Queries na webových stránkach? Tu je veľmi jednoduchý príklad:
- Začali by ste dobre štruktúrovaný dokument HTML bez akýchkoľvek vizuálnych štýlov (to je to, o čom je CSS)
- Vo svojom súbore CSS by ste začali ako normálne urobíte štýlom stránky a nastavením základne pre vzhľad stránky. Povedzte, že chcete, aby veľkosť písma stránky bola 16 bodov, môžete napísať túto CSS: body {font-size: 16px; }
- Teraz možno budete chcieť zvýšiť veľkosť písma pre väčšie obrazovky, ktoré majú dostatok nehnuteľností, aby tak urobili. Toto je miesto, kde sa dotýkajú Media Queries. Spustili by ste takýto mediálny dotaz: @media screen a (min-width: 1000px) {}
- Toto je syntax Media Query. Začína s aplikáciou @media na vytvorenie samotného Media Query. Ďalej nastavíte "typ média", čo je v tomto prípade "obrazovka". Platí to pre obrazovky počítača, tablety, telefóny atď. Nakoniec ukončíte Media Query pomocou funkcie "media". V našom príklade vyššie, to je "mid-width: 1000px". Znamená to, že Media Query začne kopírovať zobrazenia s minimálnou šírkou 1000 pixelov.
- Po týchto prvkoch mediálneho dotazu pridáte úvodnú a uzatvárajúcu vlnovú vzperu, podobne ako v normálnom pravidle CSS.
- Posledným krokom k mediálnemu dopytu je pridanie pravidiel CSS, ktoré chcete použiť, ak je táto podmienka splnená. Tieto pravidlá CSS pridáte medzi klince, ktoré tvoria Media Query, napríklad: @media obrazovka a (min-width: 1000px) {body {font-size: 20px; }
- Keď sú splnené podmienky mediálneho dotazu (okná prehliadača má šírku aspoň 1000 pixelov), tento štýl CSS sa prejaví zmenou veľkosti písma našej stránky z 16 pixelov, ktoré sme pôvodne stanovili na novú hodnotu 20 pixelov.
Pridávanie viacerých štýlov
Ak chcete prispôsobiť vizuálny vzhľad vášho webu, môžete v rámci tohto mediálneho dotazu umiestniť toľko pravidiel CSS. Napríklad, ak ste chceli nielen zväčšiť veľkosť písma na 20 pixelov, ale aj zmeniť farbu všetkých odsekov na čiernu (# 000000), môžete to pridať takto:
@media obrazovka a (min-šírka: 1000px) {body {font-size: 20px; } p {farba: # 000000; }}Pridávanie ďalších otázok týkajúcich sa médií
Okrem toho môžete pridať ďalšie dopyty médií pre každú väčšiu veľkosť a pridať ich do štýlu fotiek takto:
@media obrazovka a (min-šírka: 1000px) {body {font-size: 20px; } p {farba: # 000000; {} obrazovka @media a (min-šírka: 1400px) {body {font-size: 24px; }}Prvé mediálne dopyty by mali kopať na šírku 1000 pixelov a meniť veľkosť písma na 20 pixlov. Potom, keď bol prehliadač nad 1400 pixelov, veľkosť písma sa opäť zmenila na 24 pixlov. Môžete pridať toľko mediálnych dopytov podľa potreby pre konkrétnu webovú stránku.
Minimálna šírka a maximálna šírka
Vo všeobecnosti sú dva spôsoby zápisu dopytov médií - pomocou min-width alebo s maximálnou šírkou. Doteraz sme v činnosti videli "minimálnu šírku". To spôsobí, že sa mediálne dopyty prejavia, keď prehliadač dosiahne aspoň túto minimálnu šírku. Takže dotaz, ktorý používa "min-width: 1000px", bude platiť, ak je prehliadač široký aspoň 1000 pixelov. Tento štýl mediálneho dotazu sa používa pri vytváraní stránky spôsobom "mobilný prvý".
Ak používate maximálnu šírku, funguje to opačne. Ak sa prehliadač spadol pod túto veľkosť, uplatní sa mediálny dopyt "max-width: 1000px".
Pokiaľ ide o staršie prehliadače
Jednou z problémov s aplikáciou Media Queries je nedostatok podpory starších verzií v programe Internet Explorer. Našťastie existujú dostupné polyfily, ktoré dokážu podporiť podporu médií v starších prehliadačoch a umožňujú vám ich dnes používať na webových stránkach a súčasne zabezpečiť, aby sa zobrazovanie týchto stránok v staršom prehliadači nezobrazovalo.
Upravený Jeremy Girard dňa 1/24/17