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

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, znalosť vytvárania responzívnych návrhov je pre váš úspech zásadná.





V minulosti bolo vytváranie webových stránok, ktoré sa dobre prispôsobovali rôznym veľkostiam obrazovky, luxusom, ktorý museli majitelia webových stránok požadovať od vývojára. Vďaka rozšíreniu používania smartfónov a tabletov je však responzívny dizajn vo svete vývoja softvéru nevyhnutnosťou.



Používanie mediálnych dopytov je najlepší spôsob, ako zaistiť, aby sa váš web alebo webová aplikácia na každom zariadení 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ôsobí 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žitie jednotiek rem a em namiesto pixelov (px)
  • Nastavenie výrezu/mierky každej webovej stránky
  • Použitie mediálnych dotazov

Čo sú mediálne dotazy?

Mediálny dopyt je funkcia CSS, ktorá bola vydaná vo verzii CSS3. So zavedením tejto novej funkcie užívatelia CSS získavajú možnosť prispôsobiť zobrazenie webovej stránky na základe výšky/šírky a šírky a orientácie zariadenia/obrazovky (režim na šírku alebo na výšku).



Prečítajte si viac: Cheat Sheet The Essential CSS3 Properties

Mediálne dotazy poskytujú rámec na jednorazové vytvorenie kódu a jeho opakované použitie v celom programe. To sa nemusí zdať také užitočné, ak vyvíjate webovú stránku s iba 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á úspora času.



Používanie mediálnych dotazov

Pri použití mediálnych dopytov musíte vziať do úvahy niekoľko rôznych vecí: štruktúra, umiestnenie, rozsah a prepojenie.

Štruktúra mediálnych dotazov

Príklad štruktúry mediálneho dotazu


@media only/not media-type and (expression){
/*CSS code*/
}

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



  • Kľúčové slovo @media
  • Kľúčové slovo nie/iba
  • Typ média (môže to byť obrazovka, tlač alebo reč)
  • Kľúčové slovo a
  • Unikátny výraz uzavretý v zátvorkách
  • Kód CSS uzavretý v páre otvorených a zatvorených zložených zátvoriek.

Súvisiace: Formátovanie dokumentov na tlač pomocou CSS

Príklad mediálneho dopytu s jediným kľúčovým slovom


@media only screen and (max-width: 450px){
body{
background-color: blue;
}
}

Vyššie uvedený príklad uplatňuje štýl CSS (konkrétne modrú farbu pozadia) iba na obrazovky zariadení so šírkou 450 pixelov a nižšou - teda v zásade smartfóny. Jediné kľúčové slovo je možné nahradiť kľúčovým slovom nie a potom by štýl CSS v mediálnom dotaze vyššie platil iba pre tlač a reč.

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

Predvolený príklad mediálneho dotazu


/*design for smartphones*/
@media(max-width: 450px){
body{
background-color: blue;
}
}

Umiestňovanie mediálnych dotazov

Mediálny dotaz je vlastnosť CSS; preto ho možno použiť iba v stylingovom jazyku. 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 zahrnutia mediálnych dotazov do vašich programov - interného alebo externého CSS.

Interná metóda zahŕňa pridanie značky do značky súboru HTML a vytvorenie mediálneho dotazu v rámci parametrov značky.

Externá metóda zahŕňa vytvorenie mediálneho dotazu v externom súbore CSS a jeho prepojenie so súborom HTML prostredníctvom značky.

Rozsah mediálnych dotazov

Bez ohľadu na to, či sa mediálne dotazy používajú prostredníctvom interných alebo externých CSS, existuje jeden hlavný aspekt štýlu jazyka, ktorý môže nepriaznivo ovplyvniť funkciu mediálnych dotazov. CSS má pravidlo poradia prednosti. Pri použití selektora CSS alebo v tomto prípade mediálneho dotazu každý nový mediálny dotaz pridaný do súboru CSS prepíše (alebo má prednosť) pred tým, ktorý bol uvedený predtým.

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

Príklad dotazu na tabletové médiá


/* design for tablets */
@media(max-width: 800px){
body{
background-color: red;
}
}

Jediným problémom je, že vzhľadom na poradie poradia by tablety mali červenú farbu pozadia a smartfóny by teraz mali aj červenú farbu pozadia, pretože 450 pixlov a menej ako 800 pixelov.

Jedným zo spôsobov, ako vyriešiť tento malý problém, by bolo pridať mediálny dopyt pre tablety pred dopyt pre smartfóny; to druhé by malo prednosť pred prvým a teraz by ste mali smartfóny s modrou farbou pozadia a tablety s červenou farbou pozadia.

Existuje však lepší spôsob, ako dosiahnuť oddelený štýl pre smartfóny a tablety, bez toho, aby ste sa obávali poradia poradia. Je to funkcia mediálnych dotazov známa ako špecifikácia rozsahu, kde vývojár môže vytvoriť mediálny dotaz s maximálnou a minimálnou šírkou (rozsah).

Dotaz na tabletové médiá s príkladom rozsahu


/* design for tablets */
@media(max-width: 800px) and (min-width:451){
body{
background-color: red;
}
}

V uvedenom príklade sa umiestnenie mediálnych dotazov v šablóne štýlov stáva irelevantným, pretože dizajn pre tablety a smartphony sa zameriava na dve samostatné kolekcie šírky.

Ak nechcete do kódu CSS vkladať mediálne dotazy, môžete použiť alternatívnu metódu. Táto metóda zahŕňa použitie mediálnych dopytov v značke súboru HTML, takže namiesto jednej rozsiahlej šablóny štýlov, ktorá obsahuje predvoľby štýlu pre smartfóny, tablety a počítače, môžete použiť tri samostatné súbory CSS a v značke vytvoriť svoje mediálne dotazy.

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




href='tablet.css'>


Vyššie uvedený kód by mal byť umiestnený do značky vášho súboru HTML. Teraz stačí vytvoriť tri samostatné súbory CSS s názvami súborov main.css, tablet.css a smartphone.css - potom vytvorte konkrétny dizajn, ktorý by ste chceli pre každé zariadenie.

Štýl v hlavnom súbore sa bude vzťahovať na všetky obrazovky so šírkou väčšou ako 800 pixelov, štýl v súbore tabletu sa bude vzťahovať na všetky obrazovky so šírkou od 450 do 801 pixelov a štýl v súbore pre smartfóny sa bude vzťahovať na všetky nižšie uvedené obrazovky 451 pixelov

ako nastaviť gify ako tapetu pre Windows 10

Teraz máte nástroje na vytváranie responzívnych návrhov

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. Okrem toho vám bolo predstavené poradie prednosti v CSS a videli ste, ako to môže ovplyvniť fungovanie vašich mediálnych dopytov.

Image Credit: Negative Space/ Pexels

zdieľam zdieľam Tweet E -mail Ako nastaviť obrázok na pozadí v CSS

CSS je účinný nástroj na úpravu webových stránok. Naučiť sa umiestňovať obrázky na pozadí vás naučí veľa základov CSS.

Čítajte ďalej Súvisiace témy
  • Programovanie
  • Vývoj webových aplikácií
  • Vzhľad stránky
  • CSS
O autorovi Kadeisha Kean(21 publikovaných článkov)

Kadeisha Kean je softvérový vývojár a technický/technologický spisovateľ. Má výraznú schopnosť zjednodušiť niektoré z najzložitejších technologických konceptov; produkovať materiál, ktorému každý technologický nováčik ľahko porozumie. Je nadšená písaním, vývojom zaujímavého softvéru a cestovaním po svete (prostredníctvom dokumentov).

Viac od Kadeisha Keana

prihlásiť sa ku odberu noviniek

Pripojte sa k nášmu bulletinu a získajte technické tipy, recenzie, bezplatné elektronické knihy a exkluzívne ponuky!

Kliknutím sem sa prihlásite na odber