NOVINKA: Kurz kybernetické bezpečnosti s akreditací MŠMT, nyní již od 0 Kč. Staň se žádaným profesionálem. Zjisti více:
Avatar
Petr Kasnal
Člen
Avatar
Petr Kasnal:24.2.2016 8:35

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.2.2016 8:35
Avatar
Lava
Člen
Avatar
Lava:24.2.2016 9:09

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.2.2016 9:09
Aspartám, sacharín, to je môj vitamín
Avatar
Petr Kasnal
Člen
Avatar
Odpovídá na Lava
Petr Kasnal:24.2.2016 9:14

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.2.2016 9:14
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na Petr Kasnal
Neaktivní uživatel:24.2.2016 10:07

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í
+2,50 Kč
Řešení problému
Nahoru Odpovědět
24.2.2016 10:07
Neaktivní uživatelský účet
Avatar
Tomáš123
Člen
Avatar
Odpovídá na Neaktivní uživatel
Tomáš123:24.2.2016 17:35

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.2.2016 17:35
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na Tomáš123
Neaktivní uživatel:24.2.2016 18:11

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.2.2016 18:11
Neaktivní uživatelský účet
Avatar
Tomáš123
Člen
Avatar
Tomáš123:24.2.2016 18:24

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.2.2016 18:24
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na Tomáš123
Neaktivní uživatel:24.2.2016 18:40

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.2.2016 18:40
Neaktivní uživatelský účet
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na Petr Kasnal
Neaktivní uživatel:24.2.2016 19:09

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.2.2016 19:09
Neaktivní uživatelský účet
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.