Responzivnost "mreže"

Programiranje
#1

Radio sam ovako jedan calculator koji je trebao biti responzivan. http://bozoou.com/calculator/

E sad, kako bi vi pristupili rješavanju responzivnosti ovako nečega??

Ja sam išao sve matematikom i JS-om, a pitam se…jeli moglo drugačije??

Krenuo sam od visine ili širine elementa u kojem će se kreirati calculator (mainBox). Znajući omjer visine i širine calculatora, mogao sam iz jednog uvijek dobiti drugu dimenziju, zadržavajući taj omjer width/height fiksnim.
Zatim sam dimenzije svakom elementu računao u omjeru na te vanjske gabarite. Tu sam se prvi put susreo sa situacijom da sam htio i da font bude veći unutar većeg gumbića, tako da sam i font-size računao prema veličini polja gdje će se slova nalaziti.
Čak niti margina između buttona nije fiksna, nego je i ona responzivna. Tu je nastala mala problematika, …jer margina može biti 1px, ili 2px…itd. Nema između. Isto tako i dimenzije gumbića mogu biti samo okrugli brojevi. Tako da sam morao u konačnici prilagoditi vanjske dimenzije mainBoxu prema konačnim dobivenim dimenzijama buttonsa i margina. Jer je ispadalo da se to ne moze samo od sebe poklopiti, mainBox bi uvijek odstupao za par pixela.

Tako izračunate veličine elementima nisu same po sebi responzive, pa sam još ugradio funkciju na onresize, koja bi incijalzirala svaki put novi calculator kad bi došlo do promjene veličine nosećeg elementa, mainBox-a.

Moje pitanje je, dali je ovakav pristup opravdan za ovakvu situaciju…ili bi znali to rješiti elegantnije isključivo css-om??
Hvala!

#2

Nije opravdan. Ovakve se stvari mogu rijesiti iskljucivo koristenjem CSS-a. A i kad samo suzavas prozor na desktopu tvoj kalkulator nije responzivan. Pogledaj bilo koji CSS framework i pogledaj njihov grid i vidjet ces kako se to rijesava… Ti pokusavas jednim alatom napraviti sve poslove, a to nikako nije dobar pristup.

#3

A reagirat će responzivnotst, ako ćeš vući prozor prema manjem…samo klik da se smanji prozor ga ponekad ne trigira. No to je manje bitna stvar jer je cilj da se prilagodi prema veličini stranice nakon otvaranja iste.
A za ovo drugo si u pravu…ja zaista volim imati jedan “čekić” s kojim mogu sve napraviti xd, nesvjestan da su već neki s tim istim čekićem napravili kompleksnije alate koji bi mogli biti od pomoći…

No kako je onda izostao odgovor u ovoj temi na respozivnost fonta prema veličini polja: Font size u postotku parenta , to je bio prijelomni moment da dobijem oslonac u js-u, a posumnjam u mogućnosti css-a …

#4

Ja js nikad nekoristim za dizajn stranice uvjek css a sa js vise radim slajdere pop up

#5

Sve se može ( i bi trebalo ) riješiti CSS-om.
Ako su puno kompleksnije stranice responsivne, ne može biti da za kalkulator moraš koristiti JS da bi postigao željeni efekt.

Imaš 5 fileova koji fale i nikako ti se ne okida JS za širinu ekrana.

#6

Ovo mozes i sa Bootstrapom rijesiti,

#7

Ako ti se neda zezat to oko responsive napravi kalkulator 100% x 100 % nadi na netu neku responsive one page i sam u content stavi iframe kalkulator 100% sirina i visinu kolku zelis i eto rijeseno sve

#8

Na šta će to ličiti kod ljudi s rezolucijom 1920 x 1080 ?

#9

Dobro ce licit ^^
…

Ak mislis da dobro neizgleda samo ubacis if petlju javascript screen.width i ako dolazis prek uredaja manje od 10 pixela prebaci na mobilno ako vece ostane desktop

#10

Ne razumijem čemu JS za responsive i dalje?

#11

Ako zelis da ti prebacuje mobilnu verziju i desktop verziju inace netreba

#12

Jao @wampir sto ti komplikujes :wink:

1 Like
#13

Mozda najjednostavnije rijesenje za to postici samo CSS-om je koristeci @media da detektiras browser width/height.

Znaci kao i u css framework-u, definiras si neke breakpointove kod kojih smanjujes dimenzije kontrola kalkulatora.

Trenutno rijesenje nije bas najsretnije jer je font na malim dimenzijama gotovo necitak, + nepotrebno je komplicirano.

#14

Ha moram objasnit covjeku cemu js hahah

#15

Problem je sto pises na zbunjujuci nacin.

Ja koji se bavim web developmentom nisam razumio 5% onoga sto si napisao, a kako li je tek nekom tko cita sa strane.

1 Like
#16

Evo da ukratko pojasnim bootstrap je responsive… ali ako zelis imati posebno desktop a posebno mobile dio to se moze preko js-a rijesit sa screen.width tipa desktop ti ide domena.com a mobilna m.domena.com i automatski detektira prozor browsera

#17

Ja i dalje ne kuzim kako to njemu moze pomoci u ovom slucaju.

#18

Cekaj, polako haha

Gdje je tu logika, sta mislis zasto je nastao responsive web dizajn ? Onako jer je nekome bilo dosadno.

Pises stvarno dosta konfuzno, te ne mogu ni ja bas shvatiti sta zelis reci :smiley:

#19

Onda najbolje da covjek ovo prouci i rijesio je stvar :slight_smile:

#20

To sam ja davno primjetio, čovjek kao da s tute tipka :smiley: Daj malo se skuliraj kad pišeš, ako si na mobitelu malo se potrudi bar da staviš točku ili malo zareza ubaci, nije valjda da ti je lijeno.
I kad nekom odgovaraš ako nisi siguran u to što pišeš nemoj odovarat nikako , jer ti ponekad velike gluposti pišeš.


Copyright © 2020 WM Forum - About | Contact - Sponsored by: Mydataknox & Profit Monkey