Ako používať mediálne dotazy v HTML a CSS na vytváranie responzívnych webových stránok

Ak chcete vyvíjať webové stránky / webové aplikácie, je pre váš úspech nevyhnutné vedieť, ako vytvárať responzívne vzory.

V minulosti bolo vytváranie webových stránok, ktoré sa dobre prispôsobovali rôznym veľkostiam obrazoviek, luxusom, ktorý si vlastníci webových stránok museli vyžiadať od vývojára. Vďaka nárastu používania inteligentných telefónov a tabletov sa však vo svete vývoja softvéru stal responzívny dizajn nevyhnutnosťou.

Používanie mediálnych dopytov predstavuje najlepší spôsob, ako zabezpečiť, aby sa váš web alebo webová aplikácia na všetkých zariadeniach zobrazovala presne tak, ako chcete.

Pochopenie responzívneho dizajnu

Stručne povedané, responzívny dizajn sa zaoberá používaním HTML / CSS na vytvorenie rozloženia webovej stránky / webovej aplikácie, ktoré sa prispôsobuje rôznym veľkostiam obrazovky. V HTML / CSS existuje niekoľko rôznych spôsobov, ako dosiahnuť responzivitu pri návrhu webových stránok:

• Používanie rem a em jednotiek namiesto pixelov (px)
• Nastavenie výrezu / mierky každej webovej stránky
• Používanie mediálnych dotazov

Mediálny dopyt je vlastnosť CSS, ktorá bola vydaná vo verzii CSS3. Zavedením tejto novej funkcie získajú používatelia CSS možnosť upraviť zobrazenie webovej stránky na základe výšky, šírky a orientácie zariadenia / obrazovky (na šírku alebo na výšku).

Čítaj viac: Podvodný list základných vlastností CSS3

Mediálne dotazy poskytujú rámec pre jednorazové vytvorenie kódu a jeho opakované použitie v celom programe. To sa nemusí javiť ako užitočné, ak vyvíjate web iba s tromi webovými stránkami, ale ak pracujete pre spoločnosť so stovkami rôznych webových stránok - ukáže sa to ako obrovský čas šetrič.

Existuje niekoľko rôznych vecí, ktoré musíte brať do úvahy pri používaní mediálnych dotazov: štruktúra, umiestnenie, rozsah a prepojenie.

@ media only / not media-type and (expression) {
/ * Kód CSS * /
}

Všeobecná štruktúra mediálneho dotazu zahŕňa:

• Kľúčové slovo @media
• Kľúčové slovo nielen / iba
• Typ média (čo môže byť buď obrazovka, tlač alebo reč)
• Kľúčové slovo „a“
• Jedinečný výraz uvedený v zátvorkách
• Kód CSS uzavretý v dvojici otvorených a zatvorených zložených zátvoriek.

Súvisiace: Používanie CSS na formátovanie dokumentov na tlač

obrazovka @media only and (max-width: 450px) {
telo {
farba pozadia: modrá;
}
}

Vyššie uvedený príklad používa štýl CSS (konkrétne modrá farba pozadia) iba na obrazovky zariadení, ktoré majú šírku 450 pixelov a menej - teda v podstate smartphony. Kľúčové slovo „iba“ je možné nahradiť kľúčovým slovom „nie“ a potom by sa styling CSS v dotaze na médiá vyššie vzťahoval iba na tlač a reč.

Predvolene sa však všeobecná deklarácia dotazu na médiá vzťahuje na všetky tri typy médií, takže nie je potrebné špecifikovať typ média, pokiaľ nie je cieľom vylúčiť jeden alebo viac z nich.

/ * dizajn pre smartphony * /
@media (maximálna šírka: 450 pixelov) {
telo {
farba pozadia: modrá;
}
}

Mediálny dopyt je vlastnosťou CSS; dá sa preto použiť iba v rámci stylingového jazyka. Existujú tri rôzne spôsoby, ako zahrnúť CSS do kódu; iba dve z týchto metód však poskytujú praktický spôsob, ako zahrnúť mediálne dotazy do vašich programov - interný alebo externý CSS.

Interná metóda zahŕňa pridanie súboru

Externá metóda spočíva v vytvorení mediálneho dotazu v externom súbore CSS a jeho prepojení s vaším súborom HTML prostredníctvom servera značka.

Či už sa mediálne dotazy používajú prostredníctvom interného alebo externého CSS, existuje jeden hlavný aspekt stylingového jazyka, ktorý môže nepriaznivo ovplyvniť fungovanie mediálneho dotazu. CSS má pravidlo poradia. Pri použití a Selektor CSS, alebo v tomto prípade mediálny dotaz, každý nový mediálny dotaz, ktorý je pridaný do súboru CSS, má prednosť pred (alebo má prednosť pred) predchádzajúcim.

Predvolený kód dotazu na médiá, ktorý máme vyššie, je zacielený na smartphony (šírka 450 pixelov a menej), takže ak ste chceli nastaviť a iné pozadie pre tablety, možno si myslíte, že by ste mohli jednoducho pridať nasledujúci kód do svojho už existujúceho súboru CSS.

/ * dizajn pre tablety * /
@media (max. šírka: 800px) {
telo {
farba pozadia: červená;
}
}

Jediným problémom je, že z dôvodu poradia priorít by mali tablety červenú farbu pozadia a smartfóny teraz tiež červenú farbu pozadia, pretože 450 pixelov a menej je menej ako 800 pixlov.

Jedným zo spôsobov riešenia tohto malého problému by bolo pridať dopyt médií pre tablety pred dopyt pre smartphony; druhá by prepísala prvú a vy by ste teraz mali smartfóny s modrou farbou pozadia a tablety s červenou farbou pozadia.

Existuje však lepší spôsob, ako dosiahnuť samostatný štýl pre smartfóny a tablety bez obáv z poradia priorít. Toto je vlastnosť mediálnych dotazov známa ako špecifikácia rozsahu, kde môže vývojár vytvoriť mediálny dopyt s maximálnou a minimálnou šírkou (rozsah).

/ * dizajn pre tablety * /
@media (maximálna šírka: 800 pixelov) a (minimálna šírka: 451) {
telo {
farba pozadia: červená;
}
}

V príklade vyššie je umiestnenie mediálnych dotazov v šablóne so štýlmi irelevantné, pretože dizajn pre tablety a smartphony je zameraný na dve samostatné kolekcie šírky.

Ak nechcete vkladať dotazy do médií do svojho kódu CSS, môžete použiť alternatívny spôsob. Táto metóda spočíva v použití dotazov na médiá v serveri tagu súboru HTML, takže namiesto toho, aby mal jednu masívnu šablónu štýlov, ktorá obsahuje predvoľby štýlu pre smartphony, tablety a počítače - môžete použiť tri samostatné súbory CSS a vytvárať v nich svoje mediálne dotazy the značka.

The tag je element HTML, ktorý sa používa na importovanie štýlov CSS z externej šablóny so štýlmi. Táto značka má mediálnu vlastnosť, ktorá funguje rovnako ako mediálny dopyt v CSS.

 hlavná šablóna so štýlmi 

 šablóna štýlov tabletu 
href = "tablet.css">
 šablóna so štýlmi smartfónov 

Vyššie uvedený kód by mal byť umiestnený v

značka vášho súboru HTML. Všetko, čo musíte urobiť, je vytvoriť tri samostatné súbory CSS s názvami súborov main.css, tablet.css a smartphone.css - a potom vytvoriť konkrétny dizajn, ktorý chcete pre každé zariadenie.

Štýl v hlavnom súbore bude platiť pre všetky obrazovky so šírkou väčšou ako 800 pixelov, štýl pre súbor v tablete na všetky obrazovky so šírkou medzi 450px a 801px a štýl v súbore smartfónu bude platiť pre všetky obrazovky uvedené nižšie 451 pixelov.

Ak ste sa dostali na koniec tohto článku, mohli ste sa dozvedieť, čo je responzívny dizajn a prečo je užitočný. Teraz môžete identifikovať a používať mediálne dotazy v súboroch CSS a HTML. Ďalej vám bolo predstavené poradie priorít v CSS a videli ste, ako by to mohlo ovplyvniť fungovanie vašich mediálnych dotazov.

Uznanie obrázka: Negative Space /Pexels

Ako nastaviť obrázok na pozadí v CSS

CSS je výkonný nástroj na úpravu webových stránok. Naučenie sa, ako umiestniť obrázok na pozadí, vás naučí veľa základov CSS.

Prečítajte si Ďalej

O autorovi