Jak na responzivní web?

Nazdar Jakub_Gross
Pomocou HML/CSS no vlastne HTML5/CSS3
ale na webu teraz nájdeš ohromné množstvo
napr. aj taka wikipédia
Alebo Zajtra.sk
Hlavne sa učiť a skúšať daj si na tom webe zobraziť zdrojový kód a uč sa :)

Před časem jsem o tom psal – Jak na mobilní (responsivní) web

V nejjednodušší podobě to může fungovat tak, že se do hlavičky umístí:

A do CSS se přidá podmínka pro určitou šířku:

Do této části se potom přidají pravidla, která při požadované šířce sloupce rozlomí. Testovat to můžete tak, že si budete zmenšovat okno prohlížeče. (Při zmenšení pod zadanou šířku se pravidla aplikují.)

Firefox obsahuje integrovaný nástroj na tvorbu responsive designu. Stačí stlačiť F12

Našel jsem několik postupů a ve většině z nich je i podmínka pro desktopy. Např.:


Má nějaký význam dávat podmínku pro desktopy do media queries? Fungovat to přeci bude i když to do media queries nedám.

Můžeš mít přeci různě široké monitory. Pro 1920*1080 se může využít prostor např. i 1600 px na šířku... A nebo úplně jinak.

Jasně. Ale v těch příkladech byla vždy pro desktop jedna podmínka. Takže všechna velká rozlišení se hážou do jednoho pytle a mít to v media queries mi přijde zbytečné.

PetrVB:
„Takže všechna velká rozlišení se hážou“

To se je podstatné. Házet to někdo může, někdo nemusí. Záleží na webu, rozpočtu, záměru, … Já to třeba někdy rozlišuju ještě na 1800, 1600, 1400, …

A to co je nad 1800 dáváš taky do media queries nebo to máš v "běžné části" css?

To je vlastně v obyčejném CSS.

Ono záleží na velikosti základního webu.

Styly mimo pravidla @media mohou být:

1) Pro nejmenší šířku webu. Pro větší šířky se potom použije @media (min-width: …).
2) Pro největší šířku webu. Pro menší šířky se potom použije @media (max-width: …).
3) Pro střední šířku webu. Pro větší šířky se použije @media (min-width: …) a pro menší @media (max-width: …).

Jde o to, co bude pro tvůrce webu pohodlnější.

Do hry může vstupovat i fakt, že staré prohlížeče (např. Explorer 8) @media pravidla nepodporují, takže se v nich zobrazí styly mimo @media. Uživatelé starých prohlížečů mají typicky menší monitory, ale zase se prohlížeče bez podpory @media téměř nevyskytují na mobilech.

Nabízí se tak jako základní vytvořit podobu někde kolem 1000 pixelů a potom ji v @media zvětšovat a zmenšovat.

Jiná možnost je přidat podporu @media JavaScriptem. To umí třeba Respond.js. Nevýhoda je, že vykreslování ve starých prohlížečích bude kvůli tomu náročnější. Což může vadit, protože staré prohlížeče zpravidla běží na starém HW.

Asi nejlepší řešení (v případě, že je pro tvůrce webu obtížný postup 3), je pro staré prohlížeče automaticky generovat zvláštní CSS pro těch cca 1000 pixelů.

Mimochodem, používat v @media rozměry v pixelech není moc chytré, protože to nereflektuje nastavenou velikost písma v prohlížeči/OS.

Díky za podrobný rozbor.

Ještě dotaz. Mám web, který je udělaný metodou perfect pixel. V px je kompletně všechno včetně fontu.
Chci udělat responzivní verzi tak, že pro desktopy ponechám původní px verzi a pro mobily a tablety přidám @media. Tam vše zadám v % nebo em.

Je to dobrý postup? Může někde nastat problém? Dá se nějak paušalizovat kdy je lepší použít % a kdy em?

Díky