Responziv css létrehozása

 ( Robika88 | 2018. június 28., csütörtök - 16:22 )

Sziasztok!

Kérdésem, hogy ti, hogyan csináltok responziv felületet különböző eszközökre? Egyre több a full hd telefon és kicsit át kellene configolnom a holnpjaim.

Jelenleg böngésző vizsgálat fut szerver orladon, hogy milyen css fájlt generáljon, meg felbontás @media beállítással. Sajnos ez privát böngészésbe, meg új 4k telefonokon asztali képet eredményez.
Bootstrap? vagy mi az igazi? Felesleges javascripteket nem akarnék betenni.
Köszönöm.

Hozzászólás megjelenítési lehetőségek

A választott hozzászólás megjelenítési mód a „Beállítás” gombbal rögzíthető.

milyen css fájlt generáljon
Szerver oldalon generálja oldal letöltésenként a css-t? :o

Felesleges javascripteket nem akarnék betenni.
Nem kell hozzá JS, elég a @media queryket megfelelően használni.

Bootstrap? vagy mi az igazi?
Bootstrap nem rossz, de érdemes lehet a Bulmára is vetned egy pillantást. Ha meg dizájn "nem kell", akkor esetleg valamilyen grid rendszert is használhatsz.

https://bulma.io/
https://blog.prototypr.io/9-best-grid-system-for-web-mobile-ui-265c68d30c09

Bulma +1!

Pár projektem alatt lecseréltem bootstrap-ról.
A média kezelése nem épp a leg szimpatikusabb, de könnyen orvosolható.

----------------------------------------
o.-

A Bootstrap, és a hozzá hasonló CSS keretrendszerek elég jól megoldják a felbontás és képernyőméret problémákat.
A https://foundation.zurb.com/sites/docs/kitchen-sink.html is megér pár perc nézelődést.

[link]proman.hu[/link]

Nem feltétlen kell @media.

A minimum, ami kell, az egy viewport meta tag: https://css-tricks.com/snippets/html/responsive-meta-tag/

És persze úgy kell megírni a dolgokat, hogy kisebb szélességen is jól látszódjon. Egy példát mondok. Ha két oszlopban van a tartalom, akkor úgy rakd össze a div-eket, hogy legyen egy minimum szélességük, és ha nem férnek el egymás mellett, kerüljenek egymás alá. Ezt triviális megcsinálni, és ettől már reszponzív. Lásd: http://jsfiddle.net/zLponxc1/1/

@media akkor kell, ha szélességtől függően ettől drasztikusabban akarod átrendezni a tartalmat. Pl. egy menü desktopon ott van a lapon egy adott helyen teljes terjedelmében, telefonon viszont megjelenik egy gomb, és azt megnyomva a lap fölött jelenik meg a menü.

Na ott is megvan a viewport!

Ezt nem ismertem, köszi :)

Azt nem igen tudta jól megmagyarázni hogy miért jó csökkentenie a kontrasztot. Ha a hátteret szürkébbre veszi az ok, de hogy a betűket miért nem feketére, na erről kellene leszokni de gyorsan :D

A Bootstrap, Bulma és hasonló okosságok nem rosszak.

Van jónéhány bootstrapes és bulmás webapp-om. Valamiért az a gyakorlat nálam mostanság, ha gyorsan kell viszonylag jól kinéző frontend tipikusan egyszerűbb webapphoz, akkor a Bulmához nyúlok, ha komplexebb egyedi design kell, akkor Bootstrap. A portfólió site-om is Bootstrap.

Ahogy felettem is írták, ha nem kell ennyi beépített design és feature (tekintve hogy nem tudjuk az igényeket, simán lehet hogy ágyúval verébre az összes), akkor jobban járnál custom css-ben megvalósított reszponzivitással.

--
Always three green!

ha komplexebb egyedi design kell, akkor Bootstrap
Miért? Hol csúszik el a Bulma?

Magam sem tudom, ez inkább ilyen hülye beidegződés.

Félreértés ne essék, egyáltalán nincs bajom a Bulmával, fél éve egy általam fejlesztett pénzügyi webapp frontendjét írtam át Bootstrap 3-ról Bulmára, és a userek szerint érezhetően gyorsabb lett. Mondjuk ez inkább tűnik csak placebo-hatásnak, én nem tapasztaltam változást se pozitív, se negatív irányban sebességet tekintve, bár aztán ki tudja :-)

--
Always three green!

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout

Azota se neztem vissza.

Utana a media-query-k mar gyerekjatekok:

/* If no grid support, limit width to 50em and center align */
@supports not (display: grid) {
.grid {
max-width: 40em;
margin: 0 auto;
}
}

@media only screen
and (min-width : 1024px)
and (max-width : 1600px) {
.clearleft { clear: none;}
}

@media only screen
and (min-width : 1920px) { /* Ultra big screen */
.margin-lr {
margin-left: calc( (100% - 45.5em) / 2 );/* 10.5em;*/
margin-right: calc( (100% - 45.5em) / 2 ); /* 100%-57em; */
}
}

A bootstrap igazabol csak egy workaround volt a CSS grid helyett. En kukaztam.

---
Saying a programming language is good because it works on all platforms is like saying anal sex is good because it works on all genders....

Ez tök jó lenne. Kár, hogy pl. az IE nem támogatja. :-(

ie 6.0?

Egyebkent nekem a 88.11% lefedettseg elegendo:
https://caniuse.com/#feat=css-grid

A fenti peldamban van am fallback is...

---
Saying a programming language is good because it works on all platforms is like saying anal sex is good because it works on all genders....

Sajnos az ie 11 sem tud ezzel mit kezdeni. Egymás alatt jeleníti meg a blokkokat. :-(

Az IE igaz, hogy csak olyan ~4% körüli nálam, de ha hozzáadom a többit akik még nem ismerik, akkor már olyan 10% körül esne a forgalom. :-(

IE 10, 11-ben van limitalt tamogatas. Amivel azert ossze lehet hozni.
Alt. -ms- prefixet kell odairni.

Itt egy blogpost:
https://rachelandrew.co.uk/archives/2016/11/26/should-i-try-to-use-the-ie-implementation-of-css-grid-layout/

---
Saying a programming language is good because it works on all platforms is like saying anal sex is good because it works on all genders....

Javaslom ne használj px unit-ot, inkább em. Ha alapból nagyítják a betűket nem a weboldalt nagyítva vagy minimális betűméretet állít be valaki, akkor borul a px és betűk aránya.

dehat az device detect kod, hogy mivel jonnek (mobil, tablet, laptop, asztali gep).
Oda kell a px.

---
Saying a programming language is good because it works on all platforms is like saying anal sex is good because it works on all genders....

Speciel nem csak oda értettem, de szerintem oda is jobb az em. Ugyanis ha az alapértelmezett betűméret nem 12px hanem 42px, akkor máris nem működik a px unit alapján való döntés, míg "em" estén igen. Szerintem :)

Na de máshol nem használ px unitot, csak a media querykben...

Egyébként: hogy mi van??

Felbontás helyett karakterszámhoz jobb szerintem viszonyítani a reszponzivitást. Próbáld ki.

Ha nem akarod nagyon elbonyolítani:
https://www.w3schools.com/w3css/default.asp

--
Soli Deo Gloria

Én úgy csinálnám, hogy:
1: megkérem a HTML gyártóit, hogy rakjanak be támogatást az adatszerkezetekre amit meg akarok jeleníteni
2: megvárom amíg berakják
3: beírom az adatokat a HTML-ben a megfelelő adatszerkezetbe. CSS és JS fölösleges, mert minden képernyőn úgy jelenik meg ahogy a gyártó/felhasználó szerint jó.
:')