Avatar
Petr Kasnal
Člen
Avatar
Petr Kasnal:

Zdarec lidi na brigádě dělam tuto stránku: http://ramo.cz/ a potřeboval bych pomoc se zobrazením na telefon, prostě na menší rozlišení :p Moc nevím jak to udělat jelikož jsem tu stránku nedělal celou já nevím přesně jk to funguje... Díky za každou pomoc :) Myslim si že vám bude stačit F12

 
Odpovědět 24. února 8:35
Avatar
Mego
Člen
Avatar
Mego:

Responsive design sa robí cez tzv. media queries, vyzerá to asi takto

@media screen and (min-width:320px) and (max-width:479px) {
        /*Tu píšeš CSS, ktoré sa bude týkať len zobrazenia na displayoch medzi 320 a 479px*/
}

Ja väčšinou robím pre rozlíšenia

  • 320-479
  • 480-599
  • 600-767
  • 768-980 (alebo podľa šírky containera)
  • 980 a viac už dávam plnú stránku
Nahoru Odpovědět 24. února 9:09
Radšej 15 minút skôr, ako 15 sekúnd neskoro...
Avatar
Petr Kasnal
Člen
Avatar
Odpovídá na Mego
Petr Kasnal:

No jasně dík za pomoc :) já vim že se to dělá přes todle ale já nvm jakej příkaz tam mam změnit aby se nepodělalo to menu v levo... Zkus si tu stránku zmenšit pod 950px na šířku a strašně se "bugne"

 
Nahoru Odpovědět 24. února 9:14
Avatar
Taskkill
Redaktor
Avatar
Odpovídá na Petr Kasnal
Taskkill:

Otevřeno na mobilu - tvůj problém nebude jak to udělat neinvazivně abys nerozbyl menu vlevo (to sem tam ani neviděl) ... Tvůj problém bude to kompletně přestylovat ... Menu nahoře, ty dva sloupce textu na hlavní stránce ... Dál jsem nekoukal ... České spořitelna -> oprav si :-) ... Vtip je v tom Petře, že na mobilu se obvykle všechno orientuje na jeden sloupec textu ... Na tabletu sloupec a postranní asside bannery ... Atd ... Být tebou prostě bych si vzal stránku shodil styl popadl mobil a styloval od nuly. Pak můžeš použít takovej trochu jinej postup... Já tomu říkám desktop first mobile first ... Máš ve výsledku dva styly, jeden pro mobily druhý pro desktopy, samozřejmě k tomu klidně přidej i tablet, no a když do HTML head linkujes styly, použiješ specifickou syntaxi https://css-tricks.com/…stylesheets/
A pro každý rozměr (rozsah) máš vlastní styl ... Ono to není úplně cool, kvůli redundantnímu výskytu stejného kódu na více místech ALE pro začátečníka v respozivitě je to jak děláný - víš co zrovna běží, časem to ale odbourej a dělej to třeba tak jak píše Honza v místním seriálu.

Akceptované řešení
+20 Zkušeností
+1 bodů
Řešení problému
 
Nahoru Odpovědět 24. února 10:07
Avatar
Tomáš123
Člen
Avatar
Odpovídá na Taskkill
Tomáš123:

A už má postarané o to, že sa mu na prehliadači nepodporujúcom @media queries nenačíta CSS.

Kvôli väčšiemu počtu súborov bude nutné spracovať viac HTTP požiadaviek, čo môže viesť k neželanému spomaleniu načítavania na zariadeniach s nižšími rýchlosťami pripojenia (mobilné zariadenia). Aby to bolo CSS funkčné všade, budú takouto analógiou potrebné aspoň 4 súbory... Pritom sa to pohodlne vojde do jedného. Kód sa dá logicky rozčleniť.

Nahoru Odpovědět 24. února 17:35
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
Taskkill
Redaktor
Avatar
Odpovídá na Tomáš123
Taskkill:

V tom odkaze, ktery jsem pripojil je napsany, ze to nefunguje v prohlizecich kde neni @media ... a taky jsem psal ze to neni super postup, spis tak aby si to odladil, zjistil, ze to je hnus a rozumne to sloucil do jednoho souboru ... ale kdyz to zminujes jeste pripojim tohle Petr Kasnal Petre na tomhle se to nauc, ale nespolehej na tuhle praktiku.

Podle me stejne casem prijde na to, ze delat to tak, jak to dela vetsina (spravne), je pohodlnejsi.

 
Nahoru Odpovědět 24. února 18:11
Avatar
Tomáš123
Člen
Avatar
Tomáš123:

taky jsem psal ze to neni super postup

No, písal. Avšak, nikde v tvojom príspevku nevidím zmienku o tom, že to môže nefungovať... Preto som to zdôraznil.

a rozumne to sloucil do jednoho souboru

To nikde v predošlom príspevku neodznelo.

ALE pro začátečníka v respozivitě je to jak děláný

Skôr naopak. Veď ani nevie kde čo napísal vzniknú problémy s prebíjaním, s nevysvetliteľnou nefunkčnosťou...

Podle me stejne casem prijde na to, ze delat to tak, jak to dela vetsina (spravne), je pohodlnejsi.

Tak mu nepíš, že je vhodné niečo nevhodné. Ušetríš mu pár nepríjemných hodín.

Nahoru Odpovědět 24. února 18:24
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
Taskkill
Redaktor
Avatar
Odpovídá na Tomáš123
Taskkill:

Přiznávám .... Spěchal jsem do metra a rychle to odeslal ... Nejsem schopnej posoudit jak je to pro něj pohodlný ... Pro mě bylo jasnější dělat to odděleně .. Má to svoje mouchy ale když tak jen začneš a pak optimalizujes .. No jak říkám je to na něm .. Každopádně dík za doplnění.

Doufám že si to Petr ještě dočte. A nebude z toho zmatený.

 
Nahoru Odpovědět 24. února 18:40
Avatar
Taskkill
Redaktor
Avatar
Odpovídá na Petr Kasnal
Taskkill:

Tak pro pripad, ze bych te mohl zmast (to jsem nemel v umyslu),

stylovani do odlisnejch souboru muze byt fajn pro zacatecniky, me to prislo dobry, nekomu nemusi, nevyhodou samozrejme je, ze tahas vice souboru jak rekl Tomas, ze prohlizece nepodporujici @media nebudou fungovat, no to se hlavne tyka IE 8 a niz ... :/

KAZDOPADNE ve tve situaci trvam na tom, ze bys to mel udelat takhle, protoze ty uz mas stranku pro desktop nastylovanou, ted pujdes a metodou mobile first si nastylujes cistou stranku pro mobily a pripadne to samy pro tablety.

Pak pujdes dal a zjistis si o responzivnim stylovani vic, reknes si, tyjo co kdybych to cely sloucil do jednoho stylu, no a pujdes a sloucis to do jednoho stylu.

Budes mit perfektni styl, perfektne responzivni web a budes to umet.

Je mozny, ze se mnou pak nebudes souhlasit a reknes si, jo mel jsem se to naucit jinak, ale to nezjistis, dokud neco neudelas :)

snad jsem nic nevynechal, v pripade, ze je ti neco nejasny, napis, povazuju za nutnost na cokoliv odpovedet, kdyz je tu riziko, ze jsem ti dal nedostatecne kvalitni informace.

 
Nahoru Odpovědět 24. února 19:09
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 9 zpráv z 9.