Téma: Responsive design

Teszteléshez esetleg még a Web Developer Toolbar (firefox plugin) -> Resize -> View Responsive layouts

Én Gerire reagálnék a http://entity.hu/google-hirek/683-le...e-hir-316.html témából: szerintem a HTMl és CSS gyakorlatilag sosem lesz akkora, hogy az jelentősen zavarja a letöltést manapság, inkább azzal van a gond, ha jó sok nagy kép található az oldalon. Egy jól elkészített responsive oldalon meg nem ugyan azt a képet szolgálod ki egy destop pc-re meg egy mobilra, és ez kliens oldalon van lekezelve (máss css töltődik be, amiben más esetleg a képek url-je).

Szerintem.

Szerintem a responsive dizájn alkalmazásakor általános probléma, hogy a látogató teljesen másként látja ugyan azt az oldalt különféle eszközökkel és/vagy böngésző ablak mértben megnézve. Ráadásul sok esetben a mobil nézet már annyira le van butítva, hogy egyenesen bosszantó a látogató számára, így ha nincs lehetősége desktop nézetre váltani akkor inkább elfelejti az egész honlapot.
Tehát véleményem szerint ha a közel azonos megjelenés valamiért nem biztosítható akkor az a megoldás, hogy inkább hagyni kell a böngészőnek az automatikus méretezést. Persze akkor benne van az is, hogy esetleg mobilon is nagy lesz a letöltendő elemek mérete, de mivel sokan belső hálózaton keresztül kapcsolódnak a netre így ez nem lehet akkora probléma.
De ha már responsive dizájn optimalizálás...
Vannak erre különféle megoldások, például eszközökre és/vagy szélességre külön css fájl optimalizálás, stb. Csak hát a sok féle méretet tekintve kell hozzá 5-10 css fájl ami nem lenne gond, ha néha nem kellene változtatni valamin az oldalon. Ilyenkor aztán 5-10 helyen módosítani kell a css-t, na és ezt az 5-10 verziót ellenőrizni is szükséges. Vagy ami ennél is rosszabb, ha 5-10 külön template kerül alkalmazásra az optimális megjelenítéshez...
Én a következő megoldást szoktam használni...
480-2050 px böngésző szélesség esetén is egy css fájlt használok, benne minden width %-ban meghatározva és hozzá a betűk mérete is %-ban van megadva! A HTML-ben van egy kis js kód ami detektálja, hogy mekkora a használt böngésző aktuális szélessége, és annak függvényében megadja az alap betű méretet, amelyhez %-os arányban viszonyulni fog minden font méret.
Ezzel a megoldással közel azonos megjelenés biztosítható 480-2050 px között, és ráadásul ha pc-n nézi a látogató a tartalmat akkor teljesen mind egy, hogy félig vagy teljesen van e kinyitva a böngésző ablaka, vagy netán menet közben módosítja a méretét.

koci eredeti hozzászólása

Sziasztok!

CSS-es kérdésem lenne. Adott egy sliderkép, aminek szélessége 100%, magassága auto.
Ahogy nyomom össze a képernyőt, a kép úgy lesz arányosan egyre kisebb.
Ügyfelem kérése viszont az, hogy ne legyen ennyire vékony. Találtam rá css-ben egy calc()-ot, de nem működik valamiért.
Így próbáltam: height: calc(100% + 60px); de semmi.

Hogy kellene helyesen használnom?

Előre is köszönöm!

Ha div-re rakod rá a 100%+60px magasságot, akkor előtte a bennefoglaló elemekre is rá kellene rakni (pl. body, html). No meg nem egészen érthető, hogy miért is akarod ezt a 100%+60px-t. Hiszen itt szerintem szélességről volt szó előtte ("ahogy nyomom össze a képernőt" - ez nem széltében összenyomás? Miért akarná bárki magasságban összenyomni a dolgot? Egyszerűen görgethető lesz akkor az oldal, és kész).

Rosszul fogalmaztam elnézést, a magassága az ami túl kevés. Az auto magasságon kívül kell neki még egy kicsi
Amit írtál megpróbálom, köszönöm!

koci eredeti hozzászólása

Rosszul fogalmaztam elnézést, a magassága az ami túl kevés. Az auto magasságon kívül kell neki még egy kicsi
Amit írtál megpróbálom, köszönöm!

De hát ez készülékfüggő. Ha én most elfordítom a telefonom, akkor a 100%+60px lehet, hogy kevesebb lesz, mint az eredeti auto magasság.