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!
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.
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 …
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.
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
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
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
To sam ja davno primjetio, čovjek kao da s tute tipka 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š.
