Responzivní web design – dotazy na média
Co je to mediální dotaz?
Media query je technika CSS zavedená v CSS3.
Používá @mediapravidlo k zahrnutí bloku vlastností CSS pouze v případě, že je splněna určitá podmínka.
Příklad
Pokud je okno prohlížeče 600 pixelů nebo menší, barva pozadí bude světle modrá:
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
Přidat bod zlomu
Dříve v tomto tutoriálu jsme vytvořili webovou stránku s řádky a sloupci, která byla responzivní, ale na malé obrazovce nevypadala dobře.
S tím mohou pomoci mediální dotazy. Můžeme přidat bod přerušení, kde se určité části návrhu budou na každé straně bodu přerušení chovat jinak.
plocha počítače
Telefon
Pomocí dotazu na média přidejte bod přerušení na 768 pixelů:
Příklad
Když se obrazovka (okno prohlížeče) zmenší než 768 pixelů, každý sloupec by měl mít šířku 100 %:
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width:
100%;}
@media only screen and (max-width: 768px) {
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
}
Vždy navrhujte nejprve pro mobily
Mobile First znamená navrhování pro mobily před navrhováním pro stolní počítače nebo jakékoli jiné zařízení (Stránka se tak bude zobrazovat rychleji na menších zařízeních).
To znamená, že musíme provést nějaké změny v našem CSS.
Místo změny stylů, když je šířka menší než 768 pixelů, měli bychom změnit design, když je šířka větší než 768 pixelů. Díky tomu bude náš design Mobile First:
Příklad
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width:
768px) {
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
Další bod zlomu
Můžete přidat tolik bodů přerušení, kolik chcete.
Mezi tablety a mobilní telefony vložíme také breakpoint.
plocha počítače
Tableta
Telefon
Toho dosáhneme přidáním jednoho dalšího mediálního dotazu (na 600px) a sady nových tříd pro zařízení větší než 600px (ale menší než 768px):
Příklad
Všimněte si, že tyto dvě sady tříd jsou téměř totožné, jediný rozdíl je název ( col-a col-s-):
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 600px) {
/* For tablets: */
.col-s-1 {width: 8.33%;}
.col-s-2 {width: 16.66%;}
.col-s-3 {width: 25%;}
.col-s-4 {width: 33.33%;}
.col-s-5 {width: 41.66%;}
.col-s-6 {width: 50%;}
.col-s-7 {width: 58.33%;}
.col-s-8 {width: 66.66%;}
.col-s-9 {width: 75%;}
.col-s-10 {width: 83.33%;}
.col-s-11 {width: 91.66%;}
.col-s-12 {width: 100%;}
}
@media only screen and (min-width:
768px) {
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
Může se zdát zvláštní, že máme dvě sady identických tříd, ale dává nám to možnost v HTML rozhodnout, co se stane se sloupci v každém bodě přerušení:
Příklad HTML
Pro stolní počítač:
První a třetí sekce budou oba zahrnovat 3 sloupce. Střední část bude zahrnovat 6 sloupů.
Pro tablety:
První sekce bude zahrnovat 3 sloupce, druhá bude zahrnovat 9 a třetí sekce bude zobrazena pod prvními dvěma sekcemi a bude zahrnovat 12 sloupců:
<div class="row">
<div class="col-3 col-s-3">...</div>
<div
class="col-6 col-s-9">...</div>
<div
class="col-3 col-s-12">...</div>
</div>
Typické body přerušení zařízení
Existuje spousta obrazovek a zařízení s různými výškami a šířkami, takže je těžké vytvořit přesný bod přerušení pro každé zařízení. Pro zjednodušení můžete cílit na pět skupin:
Příklad
/*
Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px)
{...}
/* Small devices (portrait tablets and large phones, 600px and up)
*/
@media only screen and (min-width: 600px) {...}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}
/* Large devices (laptops/desktops, 992px and up)
*/
@media only screen and (min-width: 992px) {...}
/* Extra large devices (large
laptops and desktops,
1200px and up) */
@media only screen and (min-width: 1200px) {...}
Orientace: Na výšku / Na šířku
Mediální dotazy lze také použít ke změně rozvržení stránky v závislosti na orientaci prohlížeče.
Můžete mít sadu vlastností CSS, které se použijí pouze tehdy, když je okno prohlížeče širší než jeho výška, takzvaná orientace na šířku:
Příklad
Webová stránka bude mít světle modré pozadí, pokud je orientace v režimu na šířku:
@media only screen and (orientation:
landscape) {
body {
background-color: lightblue;
}
}
Skrýt prvky s dotazy na média
Dalším běžným využitím dotazů na média je skrytí prvků na různých velikostech obrazovky:
Příklad
/* If the screen size is 600px wide or less, hide the element */
@media
only screen and (max-width: 600px) {
div.example {
display: none;
}
}
Změňte velikost písma pomocí mediálních dotazů
Pomocí dotazů na média můžete také změnit velikost písma prvku na různých velikostech obrazovky:
Variabilní velikost písma.
Příklad
/* If the screen size is 601px or
more, set the font-size of <div> to 80px */
@media only screen and (min-width:
601px) {
div.example {
font-size: 80px;
}
}
/* If the screen size is 600px or
less,
set the font-size of <div> to 30px */
@media only screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
}
CSS @media Reference
Úplný přehled všech typů médií a funkcí/výrazů naleznete v pravidle @media v naší referenci CSS .