9 pokročilých trikov CSS pre dopytovanie médií, ktoré by ste mali vedieť

Pre úspešnú webovú stránku je životne dôležitá použiteľná a dostupná skúsenosť. Ak majú vaši čitatelia pozitívnu skúsenosť, je pravdepodobnejšie, že vykonajú výzvu na akciu vrátane nákupu produktov. Je tiež pravdepodobnejšie, že sa vrátia alebo odporučia vašu stránku ostatným. Skúsenosti sú kľúčové.

Dopyty médií ponúkajú rôzne funkcie CSS, ktoré môžu prispôsobiť váš web. Umožňujú vám prispôsobiť prostredie každého používateľa na základe možností jeho zariadenia. Zistite, ako poskytnúť svojim čitateľom ten najlepší zážitok, či už používajú svoj telefón alebo veľký stolný monitor.

1. Funkcia ukazovateľa

The pravidlo @media má funkciu ukazovateľa, ktorá vám umožňuje prispôsobiť váš návrh na základe primárneho ukazovacieho zariadenia. Môžete otestovať dostupnosť a kvalitu.

Tento ukazovateľ funkcia dopytovania médií má jednu z troch hodnôt: žiadna, hrubá alebo jemná. The žiadny hodnota platí, keď nie je k dispozícii žiadne ukazovacie zariadenie. The hrubý hodnota platí, keď má primárne ukazovacie zariadenie zníženú úroveň presnosti. A

dobre hodnota platí, keď má primárne ukazovacie zariadenie vysokú úroveň presnosti.

Používanie funkcie ukazovateľa

Možnosti na výber: 
 Možnosť jedna
 Možnosť dva

Vyššie uvedený kód generuje dve možnosti vstupu, ktoré sa budú líšiť v závislosti od presnosti primárneho ukazovacieho zariadenia počítača.

Počítač, ktorý má presné (alebo vysokokvalitné) primárne ukazovacie zariadenie, zobrazí nasledujúcu webovú stránku:

Počítač, ktorý má primárne zariadenie s obmedzenou presnosťou (alebo nízkou kvalitou), zobrazí nasledujúcu webovú stránku:

Zariadenie, ktoré má primárne ukazovacie zariadenie s obmedzenou úrovňou presnosti, má väčšie prepínače. Pre takýchto používateľov to poskytuje lepšiu používateľskú skúsenosť. Pomocou funkcie ukazovateľa môžete zaistiť, aby všetci vaši používatelia mali príjemný zážitok bez ohľadu na ich zariadenie.

2. Funkcia ľubovoľného ukazovateľa

Rovnako ako funkcia ukazovateľa, funkcia mediálneho dotazu ľubovoľného ukazovateľa sa zameriava na ukazovacie zariadenia. Funkcia ľubovoľného ukazovateľa však vyhodnocuje každé ukazovacie zariadenie počítača. Funkcia ľubovoľného ukazovateľa tiež používa žiadny, hrubýa dobre hodnoty.

Použitie funkcie ľubovoľného ukazovateľa

 @media (akýkoľvek ukazovateľ: v poriadku) {
 input[type="radio"] {
 šírka: 15px;
 výška: 15px;
 border-radius: 20px;
 šírka okraja: 1px;
 }
 }
@media (akýkoľvek ukazovateľ: hrubý) {
 input[type="radio"] {
 šírka: 25px;
 výška: 25px;
 border-radius: 20px;
 border-width: 2px;
 }
 }

Vyššie uvedený kód môžete jednoducho nahradiť sekciou mediálneho dopytu kódu v príklade funkcie ukazovateľa. Vyššie uvedený kód vykresľuje vhodné zobrazenie na základe kvality akéhokoľvek ukazovacieho zariadenia, ktoré môže mať počítač.

3. Funkcia vznášania

Funkcia dotazu na médium pri umiestnení kurzora vyhodnocuje, či je primárny vstupný mechanizmus zariadenia schopný umiestniť kurzor myši nad prvky v používateľskom rozhraní.

Používanie funkcie pri umiestnení kurzora myši

 /* CSS */
 a{
 text-dekorácia: žiadna;
 farba: čierna;
 }
 @media (umiestnenie: umiestenie kurzora myši) {
 a: hover {
 farba: modrá;
 }
 }
 HTML 
 Prvok odkazu

Vyššie uvedený kód zobrazí prvok. Zmení farbu (z čiernej na modrú) vždy, keď sa nad ňou vznesie primárny vstupný mechanizmus zariadenia (ktoré podporuje vznášanie).

4. Funkcia akéhokoľvek vznášania

The akékoľvek vznášanie sa Media query sa zameriava na akýkoľvek vstupný mechanizmus vrátane primárneho vstupného mechanizmu.

Používanie funkcie ľubovoľného pohybu

@media (any-hover: hover) {
 a: hover {
 farba: modrá;
 }
 }

Vyššie uvedený mediálny dopyt vytvára efekt vznášania pre akýkoľvek vstupný mechanizmus, ktorý je schopný umiestniť kurzor myši nad prvok.

5. Funkcia rozlíšenia

Funkcia dotazovania na médiá s rozlíšením vypočítava počet pixelov zobrazených konkrétnym zariadením. Zariadenie, ktoré zobrazuje viac pixelov na palec, má lepšie rozlíšenie, pretože zobrazuje obrázky s väčšími detailmi. Táto funkcia môže pomôcť vývojárom rozhodnúť sa, na ktorých zariadeniach môžu používatelia vidieť prvky v používateľskom rozhraní jasnejšie.

Funkcia rozlíšenia využíva rozsah. To znamená, že rovnako ako používanie rozhodnutie kľúčové slovo, môžete použiť min-rozlíšenie a maximálne rozlíšenie. Funkcia rozlíšenia mediálnych dotazov patrí k dátovému typu rozlíšenia. To znamená, že vlastnosť rozlíšenia je merateľná v jednej z troch jednotiek: bodov na palec (dpi), bodov na centimeter (dpcm) alebo bodov na pixely (dppx).

Používanie funkcie rozlíšenia

/* CSS */
@media (min. rozlíšenie: 72 dpi) {
 p {
 farba: biela;
 farba pozadia: modrá;
 }
}
 HTML 

 Lorem ipsum dolor sit, amet consectetur adipisicing elit.

Najnižšie rozlíšenie, ktoré môže mať zariadenie a stále zobrazuje kvalitné obrázky, je 72 dpi. Ak má teda zariadenie rozlíšenie 72 dpi alebo viac, vo svojom prehliadači zobrazí nasledujúci výstup:

6. Funkcia orientácie

Výrez zariadenia môže mať iba jednu z dvoch orientácií: portrét alebo krajina. Mali by ste si uvedomiť, že orientácia výrezu sa líši od orientácie zariadenia. Ak zariadenie používa softvérovú klávesnicu, jeho výrez sa môže zmeniť z na výšku na šírku, zatiaľ čo samotné zariadenie je stále v polohe na výšku.

Používanie funkcie orientácie

/* CSS */
 telo{
 displej: flex;
 }
 sekcia{
 orámovanie: 2px plná modrá;
 výplň: 3px;
 okraj: 3px;
 }
 @media (orientácia: na šírku) {
 telo {
 smer ohybu: riadok;
 }
 }
@media (orientácia: na výšku) {
 telo {
 smer ohybu: stĺpec;
 }
 }
 HTML 
 Lorem ipsum, dolor sit amet consectetur adipisicing elit.

 Lorem ipsum, dolor sit amet consectetur adipisicing elit.

 Lorem ipsum, dolor sit amet consectetur adipisicing elit.

Vyššie uvedený kód mení rozloženie webovej stránky podľa orientácie zariadenia.

Zariadenie s výrezom v režime na šírku zobrazí nasledujúcu webovú stránku:

Zariadenie s výrezom v režime na výšku zobrazí nasledujúcu webovú stránku:

7. Funkcia výšky

Funkcia dotazu na výšku média vám umožňuje určiť štýl CSS na základe výšky zobrazovanej oblasti zariadenia používateľa. Táto funkcia podporuje rozsah, takže môžete použiť aj min-výška a max-výška Kľúčové slová.

Použitie funkcie výšky

 /* CSS */
 @media (minimálna výška: 360 pixelov) {
 p{
 orámovanie: 2px bodkovaná oranžová;
 }
}
 HTML 

 Lorem ipsum dolor sit amet consectetur adipisicing elit.

Vyššie uvedený kód prispôsobuje to, čo používateľ vidí, na základe výšky svojho zariadenia. Používatelia s výškou zariadenia 360 pixelov a viac uvidia niečo podobné ako nasledujúca webová stránka:

Zariadenia s výškou pod 360 pixelov nezobrazia okraj okolo odseku na webovej stránke.

8. Funkcia šírky

Funkcia dopytu na šírku média vám umožňuje vytvoriť špecifický štýl CSS na základe šírky zobrazovanej oblasti zariadenia používateľa. Táto funkcia podporuje aj dosah, takže máte možnosť použiť min-šírka a max-šírka Kľúčové slová.

Použitie funkcie šírky

 /* CSS */
 @media (min. šírka: 600 pixelov) {
 p{
 orámovanie: 2px plná fialová;
 }
}
 HTML 

 Lorem ipsum dolor sit amet consectetur adipisicing elit.

Vyššie uvedený kód prispôsobuje to, čo používateľ vidí, na základe šírky jeho zariadenia. Používateľom so šírkou zariadenia 600 pixelov a viac sa zobrazí niečo ako nasledujúca webová stránka:

Používanie mediálnych dopytov založených na šírke a výške môže byť efektívnou stratégiou v aby bol váš web responzívny.

9. Funkcia farby

Funkcia dotazovania na farebné médiá vyhodnocuje farebnú zložku zariadenia (červená, zelená, modrá). Hodnota sa vzťahuje na to, koľko bitov používa displej pre každý komponent, čo určuje, koľko rôznych farieb môže zobraziť. Moderné zariadenia zvyčajne používajú 24-bitový displej, ktorý používa osem bitov na farebnú zložku. Má tiež celočíselné hodnoty, kde bezfarebné zariadenie je nula.

Farebná funkcia tiež využíva min-farba a max-farba rozsahy.

Používanie funkcie farieb

 /* CSS */
 @media (min. farba: 7) {
 p{
 orámovanie: 2px plná zelená;
 }
}
 HTML 

 Lorem ipsum dolor sit amet consectetur adipisicing elit.

Zariadenia s farebnou zložkou sedem a viac zobrazia vo svojich prehliadačoch nasledujúci výstup:

Teraz môžete vytvárať jedinečné používateľské skúsenosti

Mali by ste byť schopní použiť tieto pokročilé mediálne dopyty na zlepšenie zážitku každého používateľa, ktorý navštívi vašu webovú stránku alebo aplikáciu. Je dôležité, aby ste používateľom mobilných zariadení a počítačom poskytli rovnako pozitívny dojem z vášho webu.

Mediálne dotazy nie sú jedinými nástrojmi CSS, ktoré môžu posilniť vaše vývojárske zručnosti.

8 základných CSS tipov a trikov, ktoré by mal vedieť každý vývojár

Prečítajte si ďalej

O autorovi