Za účelem provedení responsive web design, je důležité pochopit, dotazy na média CSS, zejména médií a mediální obrazovka dotazy.

začněme zřejmou otázkou.

Co je mediální dotaz?

mediální dotaz je technika, která byla zavedena v CSS3. Dotaz zahrnuje použití pravidla @media ke spuštění bloku vlastností CSS v případě, že je předem stanovená podmínka pravdivá.

například, níže uvedený kód určuje, že pokud je okno prohlížeče 400px nebo méně, pozadí, barva bude světle zelená:

@media pouze obrazovky a (max-width: 400px) {
body {
Background-color: lightgreen;
}
}

Mediální dotazy jsou zvláště užitečné s přidáním zarážky pro responzivní design. Protože zarážky jsou v podstatě čísla pixelů, při kterých se obsah nebo design jeví uživatelům odlišně, mediální dotazy se používají k definování změn, ke kterým pixelům musí dojít.

V příkladu níže, zákoník nařizuje, že pokud je okno prohlížeče menší než 600px, každý sloupec šířka by měla být 100%,

/* Na pracovní ploše: */
.col-1 {šířka: 8.33%;}
.col-2 {šířka: 16,66%;}
.col-3 {Šířka: 25%;}
.col-4 {šířka: 33.33%;}
.col-5 {šířka: 41,66%;}
.col-6 {šířka: 50%;}
.col-7 {šířka: 58.33%;}
.col-8 {Šířka: 66,66%;}
.col-9 {šířka: 75%;}
.col-10 {Šířka: 83.33%;}
.col-11 {šířka: 91,66%;}
.col-12 {width: 100%;}

@media pouze obrazovky a (max-width: 600px) {
/* Pro mobilní telefony: */
{
šířka: 100%;
}
}

každý mediální dotaz se skládá z volitelného typu média a jednoho nebo více výrazů mediálních funkcí. Je možné kombinovat více mediálních dotazů s logickými operátory. Všechny dotazy médií jsou citlivé na velká a malá písmena.

každý mediální dotaz je považován za pravdivý, pokud zadaný typ média odpovídá zařízením, na kterých je web zobrazen. Kromě toho musí být výrazy mediálních funkcí také pravdivé.

Co je dotaz na mediální obrazovku?

dotaz @media screen jednoduše znamená, že daný dotaz je určen pro barevné obrazovky nebo zařízení, která podporují režim „obrazovky“.

Vezměme si příklad:

@media screen a (max-width:500px)

výše uvedený dotaz platí pro obrazovky s maximální šířkou 500 pixelů. Smyslem toho je hlavně nasměrovat kód k rozlišení mezi „obrazovkou“ a jinými typy médií (jako je tisk, Braillovo písmo, reliéfní, ruční, atd.).

jaký je dotaz pouze pro média?

přidáním logického operátora „pouze“ do mediálního dotazu vývojář zajistí, že dotaz bude použit pouze v případě, že se shoduje celá podmínka. Pokud nepoužíváte pouze starší prohlížeče nemusí číst nebo interpretovat všechny výrazy mediálních funkcí. Například, pokud dotaz je,

@media screen and (max-width:500px)

starší prohlížeče mohou interpretovat dotaz, jak jen obrazovka a ignorovat počet pixelů. To by vedlo k použití podmínky dotazu na všech obrazovkách. Chcete-li tomu zabránit, můžete použít:

@media only screen a (max-width:500px)

při použití jediného operátora nezapomeňte zadat typ média.

význam v responzivním designu

mediální dotazy jsou nápomocné při implementaci responzivního webového designu. Výše uvedené dotazy jsou dva z nejčastěji používaných a jsou užitečné při zajišťování optimalizace obsahu vašeho webu pro velikosti a typy zařízení.

jakmile na svém webu použijete dotazy CSS, ověřte jejich účinnost. Nejjednodušší způsob, jak toho dosáhnout, je použít nástroj, který vám umožní otestovat design webových stránek na skutečných zařízeních a prohlížečích. Existuje několik nástrojů, které to usnadňují, ale udělejte si čas a najděte responzivní kontrolu online, která vám dává možnost testovat na dostatečně široké škále zařízení — stolních i mobilních.