Jak zprovoznit responzivní design

30. 4. 2013 12:19:03

Dobrý den,

dělám responzivní šablonu pro náš web http://www.topdodavatel.cz/. V headeru jsem vložil tento kód, který je nejspíš správný:

Dále v samotné šabloně jsem nastavil šířku prvků na 300px (tzn. div wrapper, header, content a všechny další prvky). Také jsem tam, kde byl nadefinovaný float, vložil hodnotu none.

Faktem je, že responzovní styl dělám poprvé a něco bude ještě třeba upravit ve výše zmiňované šabloně. Mohl by mě prosím někdo nasměřovat správným směrem, aby se web na malých rozlišeních změnil na jednosloupcový layout?

30. 4. 2013 12:19:03

https://webtrh.cz/diskuse/jak-zprovoznit-responzivni-design#reply896499

Marek

(2 hodnocení)

30. 4. 2013 12:22:30

Nejsem css guru, ale zkus si prostudovat Twitter Bootstrap. Popřípadě si vygoogluj něco na způsob "How to make responsive layout". Jeden z prvních odkazů

30. 4. 2013 12:22:30

https://webtrh.cz/diskuse/jak-zprovoznit-responzivni-design#reply896498

phys0c

(4 hodnocení)

30. 4. 2013 12:24:37

Neviem si predstaviť, kde bude menu ak to chcete do jedného stĺpca. Ale neni to ani takto najhoršie, "doubletapom" sa mi to pekne zväčší len na text, defaultne to je tiež čitateľné a automaticky sa to zmenší na rozlíšenie, mne by to stačilo. Používam Galaxy Note, môžem poslať screenshot ak chcete.

30. 4. 2013 12:24:37

https://webtrh.cz/diskuse/jak-zprovoznit-responzivni-design#reply896497

maresj

(26 hodnocení)

30. 4. 2013 12:25:01

Ok, díky za info a odkazy. Už jsem se díval na http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries, ale příliš moudrý z toho nejsem.

Napsal BumbleBeee;943662
Nejsem css guru, ale zkus si prostudovat Twitter Bootstrap. Popřípadě si vygoogluj něco na způsob "How to make responsive layout". Jeden z prvních odkazů

---------- Příspěvek doplněn 30.04.2013 v 12:26 ----------

Jestli byste mi mohl udělat ten screen, budu moc rád. Mám tady starou Nokii a na té to dost dobře otestovat nejde :)

Napsal phys0c;943664
Neviem si predstaviť, kde bude menu ak to chcete do jedného stĺpca. Ale neni to ani takto najhoršie, "doubletapom" sa mi to pekne zväčší len na text, defaultne to je tiež čitateľné a automaticky sa to zmenší na rozlíšenie, mne by to stačilo. Používam Galaxy Note, môžem poslať screenshot ak chcete.

30. 4. 2013 12:25:01

https://webtrh.cz/diskuse/jak-zprovoznit-responzivni-design#reply896496

Marek

(2 hodnocení)

30. 4. 2013 12:31:36

Tady máš screenshot z mého Galaxy S3. Řekl bych, že to vypadá ok, ne? :)

30. 4. 2013 12:31:36

https://webtrh.cz/diskuse/jak-zprovoznit-responzivni-design#reply896495

maresj

(26 hodnocení)

30. 4. 2013 12:33:01

To je fakt. Děkuji za screenshot. Vypadá to dobře i na té základní šabloně. Nechám to teda s tím původním stylem a mezitím si vyzkouším ty zmiňované tutorialy :)

Napsal BumbleBeee;943671
Tady máš screenshot z mého Galaxy S3. Řekl bych, že to vypadá ok, ne? :)

30. 4. 2013 12:33:01

https://webtrh.cz/diskuse/jak-zprovoznit-responzivni-design#reply896494

vpixle

(3 hodnocení)

30. 4. 2013 19:43:40

Responzivní design na 99,9% nevyresis pridanim jednoho radku kodu. Asi bych zacal s nejakym overenym HTML5 responsive boilerplatem (http://www.initializr.com/).

Pokud spravujes jedny stranky tak se ti nevyplati delat nejakej vlastni framework a asi bych ti radil dobre vyuzit neco co tady uz je (Bootstrap, Foundation, Ratchet). A az to vsechno zacne fungovat jen si to jen preskinujes koupenou, nebo vlastni "kuzickou". Ted se strhne obrovskej flame vsech barokizujicich webdesigneru, ale jako majitel bych urcite nechtel utracet za dalsiho nedouka co vystrihava z Photoshopu jak pred 15ti roky. Na vasich strankach asi nikdo neocekava, ze budete treskute kreativni. Informace ktere mi zpocitate musim jasne a na prvni dobrou pochopit. Az tam jednou budete chtit, pouzit nejakej frontend framework budete mit naskok.

Koukni se na http://www.divshot.com/

30. 4. 2013 19:43:40

https://webtrh.cz/diskuse/jak-zprovoznit-responzivni-design#reply896493

phys0c

(4 hodnocení)

2. 5. 2013 20:52:54

Screenshot po double tape, tam kde sú tie dve čiary, pôsobí to rozhádzane a to aj na PC, vďaka tej stuhe v rohu..a akurát logo je preseknuté na polovicu, to by sa dalo nastaviť asi pomocou margin:auto;

2. 5. 2013 20:52:54

https://webtrh.cz/diskuse/jak-zprovoznit-responzivni-design#reply896492

Pro odpověď se přihlašte.

Přihlásit