Ovako, radim neku web stranicu, ništa strašno, osnovni elementi + slider, anketica, itd… Problem nastaje kada tu web stranicu otvorim na drugom računalu, odnosno u drugoj rezoluciji (inače, radil sam na laptopu), pa to sve ispadne pomiješano, tj. nije onak kak je na laptopu. E sad, očito je da će mi tu pomoći responzivni web. Zar ne? Al tu trebam sad vašu pomoć oko tog responzivnog weba. Može netko objasniti kak se on radi ili dati neki jako dobar link za tutorial? Našao sam par linkova, al niti jedan kvalitetan.
Kako to misliš “niti jedan kvalitetan”? Pomoću media queries definiraš css za širinu ekrana i unutra podešavaš css tj. za početak poništavaš float-anje float:left u float: none, s tim da su širine u postocima.
Ali, ipak morat ćeš se malo pomučit.
1 Like
Kako mislis da ti to netko objasni u par rečenica,o njemu se moze knjiga napisat.
Ne radi se tu samo o bacanju media queries i širina u postorcima u CSS fajl ,nego o stotinu drugih stvari.
Google ce ti pomoci u trazenju tutorijala i postova o njemu , a ima ih na stotine.
Bilo bi super da stane to u par rečenica, ali na istom mjestu sam bio nedavno, prije koji mjesec, i još uvijek petljam na stranicama, za sitnice, jer nema nekog 100% set it and forget it za sve stranice.
Google is your frend!
Naravno da se ne radi samo o bacanju media queriesa i postocima, to je tek početak, zato sam mu napisao da će se morat malo pomučit (da se ne obeshrabri odmah). Morat će tražiti, vježbati, isprobavat. I na kraju, nikad gotov od tweek-anja.
Princip ti je vrlo jednostavan…
zamisli ovako:
div klase wrapper ti drži cijeli sadržaj stranice i njegova maksimalna širina je npr 1200px (u css klasi wrapper staviš max-width:1200px;)
zatim unutar wrappera recimo imaš dva kontenera (diva) od kojih je jedan vezan na recimo main-content klasu, a drugi na sidebar…
fiksno gledano, recimo da ti je main-content širine 800px, a sidebar 400px… ako bi ih želio napraviti responzivnima, odnosno da se proporcionalno skupljaju s wrapper kontenerom, onda njihove širine moraš pretvoriti u postotke prema formuli:
800px/1200px x 100% = …
400px/1200px x 100% = …
i onda te postotke zapišeš umjesto piksela pod width klasama main-content i sidebar…
e sad, sadržaj će se prilagoditi širini ekrana, no recimo da na nekoj rezoluciji ne želiš više imati sidebar desno već npr. ispod main-content, tu sad u igru ulaze media upiti, npr:
@media screen and (max-width: 500px) { } …što browseru govori da na širini viewporta od 500px loada set atributa koje navodiš unutar vitica…
i ponovo rekalkuliraš sve, s time da ti je sada 500px umjesto 1200px…
eto