9 pokročilých triků CSS pro dotazy na média, které byste měli znát

Použitelný a přístupný zážitek je pro úspěšný web zásadní. Pokud mají vaši čtenáři pozitivní zkušenost, je pravděpodobnější, že provedou výzvu k akci, včetně nákupu produktů. Je také pravděpodobnější, že se vrátí nebo doporučí váš web ostatním. Zkušenosti jsou klíčové.

Mediální dotazy nabízejí různé funkce CSS, které mohou přizpůsobit váš web. Umožňují vám přizpůsobit prostředí každého uživatele na základě možností jeho zařízení. Přečtěte si, jak svým čtenářům poskytnout ten nejlepší zážitek, ať už používají svůj telefon nebo velký stolní monitor.

1. Funkce ukazatele

The pravidlo @media má funkci ukazatele, která vám umožňuje přizpůsobit návrh na základě primárního ukazovacího zařízení. Můžete otestovat dostupnost a kvalitu.

Tento ukazatel funkce dotazu na média má jednu ze tří hodnot: žádná, hrubá nebo jemná. The žádný hodnota platí, když není k dispozici žádné ukazovací zařízení. The Hrubý hodnota platí, když má primární ukazovací zařízení sníženou úroveň přesnosti. A pokuta hodnota platí, když má primární ukazovací zařízení vysokou úroveň přesnosti.

Použití funkce ukazatele

Možnosti na výběr: 
 Možnost jedna
 Možnost dvě

Výše uvedený kód generuje dvě možnosti vstupního rádia, které se budou lišit v závislosti na přesnosti primárního polohovacího zařízení počítače.

Počítač, který má přesné (nebo vysoce kvalitní) primární ukazovací zařízení, zobrazí následující webovou stránku:

Počítač, který má primární zařízení s omezenou přesností (nebo nízkou kvalitou), zobrazí následující webovou stránku:

Zařízení, které má primární ukazovací zařízení s omezenou úrovní přesnosti, má větší přepínače. To těmto uživatelům poskytuje lepší uživatelský zážitek. Pomocí funkce ukazatele můžete zajistit, aby všichni vaši uživatelé měli příjemný zážitek, bez ohledu na jejich zařízení.

2. Funkce libovolného ukazatele

Stejně jako funkce ukazatele se funkce dotazu na média libovolného ukazatele zaměřuje na ukazovací zařízení. Funkce libovolného ukazatele však vyhodnocuje každé ukazovací zařízení počítače. Funkce libovolného ukazatele také používá žádný, Hrubý, a pokuta hodnoty.

Použití funkce libovolného ukazatele

 @media (jakýkoli ukazatel: v pořádku) {
 input[type="radio"] {
 šířka: 15px;
 výška: 15px;
 border-radius: 20px;
 border-width: 1px;
 }
 }
@media (libovolný ukazatel: hrubé) {
 input[type="radio"] {
 šířka: 25px;
 výška: 25px;
 border-radius: 20px;
 border-width: 2px;
 }
 }

Výše uvedený kód můžete jednoduše nahradit částí dotazu na média v kódu v příkladu funkce ukazatele. Výše uvedený kód vykresluje vhodné zobrazení na základě kvality jakéhokoli ukazovacího zařízení, které počítač může mít.

3. Funkce vznášet se

Funkce dotazu na média při vznášení vyhodnocuje, zda je primární vstupní mechanismus zařízení schopen umístit ukazatel myši nad prvky v uživatelském rozhraní.

Použití funkce visení

 /* CSS */
 A{
 text-dekorace: žádná;
 Černá barva;
 }
 @media (umístit kurzor myši) {
 a: hover {
 barva: modrá;
 }
 }
 HTML 
 Prvek odkazu

Výše uvedený kód zobrazí živel. Změní barvu (z černé na modrou), kdykoli se nad ní vznese primární vstupní mechanismus zařízení (které podporuje vznášení).

4. Funkce libovolného pohybu

The jakýkoli-hover mediální dotaz se zaměřuje na jakýkoli vstupní mechanismus, včetně primárního vstupního mechanismu.

Použití funkce libovolného pohybu

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

Výše uvedený dotaz na média vytváří efekt přechodu pro jakýkoli vstupní mechanismus, který je schopen umístit kurzor nad prvek.

5. Funkce rozlišení

Funkce dotazu na rozlišení média vypočítá počet pixelů zobrazených konkrétním zařízením. Zařízení, které zobrazuje více pixelů na palec, má lepší rozlišení, protože zobrazuje obrázky s více detaily. Tato funkce může vývojářům pomoci rozhodnout se, na kterém zařízení by uživatelé mohli vidět prvky v uživatelském rozhraní jasněji.

Funkce rozlišení využívá rozsah. To znamená, že stejně jako použití řešení klíčové slovo, můžete použít min-rozlišení a maximální rozlišení. Funkce rozlišení dotazu na média patří k datovému typu rozlišení. To znamená, že vlastnost rozlišení je měřitelná v jedné ze tří jednotek: bodů na palec (dpi), bodů na centimetr (dpcm) nebo bodů na pixel (dppx).

Použití funkce rozlišení

/* CSS */
@media (minimální rozlišení: 72 dpi) {
 p {
 barva bílá;
 barva pozadí: modrá;
 }
}
 HTML 

 Lorem ipsum dolor sit, amet consectetur adipisicing elit.

Nejnižší rozlišení, které může zařízení mít a přesto zobrazovat kvalitní obrázky, je 72 dpi. Pokud má zařízení rozlišení 72 dpi nebo více, zobrazí ve svém prohlížeči následující výstup:

6. Funkce orientace

Výřez zařízení může mít pouze jednu ze dvou orientací: portrét nebo krajina. Měli byste si uvědomit, že orientace výřezu se liší od orientace zařízení. Pokud zařízení používá softwarovou klávesnici, jeho výřez se může změnit z na výšku na šířku, zatímco samotné zařízení je stále v poloze na výšku.

Použití funkce orientace

/* CSS */
 tělo{
 displej: flex;
 }
 sekce{
 ohraničení: 2px plná modrá;
 výplň: 3px;
 okraj: 3px;
 }
 @media (orientace: na šířku) {
 tělo {
 směr ohybu: řádek;
 }
 }
@media (orientace: na výšku) {
 tělo {
 směr ohybu: sloupec;
 }
 }
 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.

Výše uvedený kód mění rozvržení webové stránky podle orientace zařízení.

Zařízení s výřezem v režimu na šířku zobrazí následující webovou stránku:

Zařízení s výřezem v režimu na výšku zobrazí následující webovou stránku:

7. Funkce výšky

Funkce dotazu na výšku média vám umožňuje určit styl CSS na základě výšky zobrazované oblasti zařízení uživatele. Tato funkce podporuje rozsah, takže můžete použít také min-výška a Maximální výška klíčová slova.

Použití funkce výšky

 /* CSS */
 @media (minimální výška: 360 pixelů) {
 p{
 ohraničení: 2px tečkované oranžově;
 }
}
 HTML 

 Lorem ipsum dolor sit amet consectetur adipisicing elit.

Výše uvedený kód přizpůsobuje, co uživatel vidí, na základě výšky jeho zařízení. Uživatelé s výškou zařízení 360 pixelů a vyšší uvidí něco podobného jako následující webová stránka:

Zařízení s výškou pod 360 pixelů nezobrazí ohraničení kolem odstavce na webové stránce.

8. Funkce šířky

Funkce dotazu na šířku média vám umožňuje vytvořit konkrétní styl CSS na základě šířky zobrazované oblasti zařízení uživatele. Tato funkce také podporuje dosah, takže máte možnost použít min-šířka a max. šířka klíčová slova.

Použití funkce šířka

 /* CSS */
 @media (min-width: 600px) {
 p{
 ohraničení: 2px plná fialová;
 }
}
 HTML 

 Lorem ipsum dolor sit amet consectetur adipisicing elit.

Výše uvedený kód přizpůsobuje, co uživatel vidí, na základě šířky jeho zařízení. Uživatelé s šířkou zařízení 600 pixelů a více uvidí něco jako následující webovou stránku:

Použití dotazů na média na základě šířky a výšky může být účinnou strategií aby byl váš web responzivní.

9. Barva Funkce

Funkce dotazu na barevné médium vyhodnocuje barevnou složku zařízení (červená, zelená, modrá). Hodnota udává, kolik bitů používá displej pro každou komponentu, což určuje, kolik různých barev může zobrazit. Moderní zařízení obvykle používají 24bitový displej, který používá osm bitů na barevnou složku. Má také celočíselnou hodnotu, kde bezbarvé zařízení je nula.

Barevná funkce také používá min-barva a max-barva rozsahy.

Použití funkce barev

 /* CSS */
 @media (minimální barva: 7) {
 p{
 ohraničení: 2px plná zelená;
 }
}
 HTML 

 Lorem ipsum dolor sit amet consectetur adipisicing elit.

Zařízení s barevnou složkou sedm a více zobrazí ve svých prohlížečích následující výstup:

Nyní můžete vytvářet jedinečné uživatelské zkušenosti

Měli byste být schopni používat tyto pokročilé dotazy na média ke zlepšení zážitku každého uživatele, který navštíví váš web nebo aplikaci. Je důležité, aby uživatelé mobilních zařízení i uživatelé počítačů měli na vašem webu stejně pozitivní dojem.

Mediální dotazy nejsou jedinými nástroji CSS, které mohou posílit vaše vývojářské dovednosti.

8 základních CSS tipů a triků, které by měl znát každý vývojář

Přečtěte si další

O autorovi