Responziv css létrehozása

Fejlesztés

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.

  • 2422 megtekintés

( Saboteur v | 2018. 06. 28., cs – 16:31 )

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-265c68d3…

( joco01 v | 2018. 06. 29., p – 12:11 )

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ü.

( donatus v | 2018. 06. 29., p – 13:37 )

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!

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!

( khiraly | 2018. 06. 29., p – 16:53 )

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

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....

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-…

---
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....

( tarnoc | 2018. 07. 01., v – 08:29 )

É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ó.
:')