[quote=“dombo”]Ukoliko si pokušao samo resize desktop browsera neće biti responzivna. Jer je u kodu navedeno
@media screen and (max->>>device<<<<-width: 610px){
body{
width: 605px;
overflow: hidden;
}
…
Ako može pokušaj na smartphonu pa javi.[/quote]
Koristio sam firefox responsive design view tool 
Radi isključivo na mobilnim ili tablet browserima.
[quote=“APazinjan”]Za prefixe koristi ovo: Nettuts+ Prefixr
Što se tiče Chrome-a i Opere, uglavnom ih korisnici redovito nadograđuju tako da nemaš puno brige, a i ako radi u najnovijoj verziji, velika je vjerojatnost da će raditi i u onim malo starijim.[/quote]
što točno ta aplikacija na stranici nudi ?
tnx
Kod “klasičnog” dizajna, stranica se izradi tako da izgleda kako je zamišljeno u najnovijim verzijama najpopularnijih desktop browsera, i što bliže tome u par starijih verzija IE-a.
Potom se pogleda kako to izgleda na mobitelu i isprave se (ili sakriju) greške tako da stranica bude - upotrebljiva. Ništa više, ništa manje.
Ako se pri tome izgubi neka sjena ili neki zaobljeni kut, to je najmanji problem.
Kod RWD, stranica tako izgledati kako je zamišljeno, ne samo u najnovijim verzijama najpopularnijih desktop browsera, nego i na mobitelima (smartphoneima).
E sad, Google Chrome se ažurira svakih mjesec-dva i možeš računati da svi, baš svi korisnici Chromea imaju ono što je uvedeno u npr. Chrome 5, ako je aktualna verzija Chrome 23.
Međutim, korisnici Android smartphonea ne kupuju novi smartphone svaka dva-tri mjeseca kako bi imali najnoviji browser.
I lako je moguće da ono što je uvedeno u Chrome 5, većina Androida nema.
I kakve veze ima podrška za CSS3 pojedinih browsera sa RWD?
Kod RWD treba voditi računa o podršci za CSS3 najkorištenije verzije Chromea (a to je uvijek najnovija verzija) i najkorištenije verzije Android browsera (a to je uvijek par generacija stara verzija). Bez obzira što su i jedno i drugo Webkit browseri.
Kod “klasičnog” dizajna, dizajn za desktop browsere pa krpanje grešaka za mobitele, CSS3 podrška nije toliko bitna. Kod takvog pristupa pojavljuju se puno veći problemi od neprikazivanja neke sjene.
[quote=“chief_wolfinjo”]što točno ta aplikacija na stranici nudi ?
tnx :)[/quote]
Dodaje prefixe za druge browsere. Porbaj upisatio opacity: 0;
i kliknuti Prefixize.
Ne podržava sva pravila ali dosta njih da pa je korisno za početnike.
[quote=“APazinjan”]Dodaje prefixe za druge browsere. Porbaj upisatio opacity: 0;
i kliknuti Prefixize.
Ne podržava sva pravila ali dosta njih da pa je korisno za početnike.[/quote]
Hvala
U Prefixr sam upisao ovo:
box-sizing: border-box;
background: linear-gradient(to bottom, white, black);
i dobio sam ovo:
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
background: -webkit-linear-gradient(to bottom, white, black);
background: -moz-linear-gradient(to bottom, white, black);
background: -o-linear-gradient(to bottom, white, black);
background: -ms-linear-gradient(to bottom, white, black);
background: linear-gradient(to bottom, white, black);
Kao prvo, nikada nije postojalo -ms-box-sizing
IE8 i noviji podržavaju box-sizing bez prefiksa -ms-
IE7 i stariji ne podržavaju box-sizing ni s prefiksom ni bez njega
-ms-box-sizing je izmišljotina koja samo nepotrebno povećava CSS.
Kao drugo, sve ovo je pogrešno:
background: -webkit-linear-gradient(to bottom, white, black);
background: -moz-linear-gradient(to bottom, white, black);
background: -o-linear-gradient(to bottom, white, black);
background: -ms-linear-gradient(to bottom, white, black);
umjesto “to bottom” treba biti “top”
Kao treće, nedostaje verzija za Android 2.3.3 i starije (najkorišteniji Androidi)
background: -webkit-gradient(linear, left top, left bottom, from(white), to(black));
Zaključak: ne bi se trebalo previše pouzdati u Prefixr.
Pogotovo ne početnici.
Edit:
Ako upišem
background: -webkit-linear-gradient(top, white, black);
dobijem
background: -webkit-linear-gradient(top, white, black);
background: -moz-linear-gradient(top, white, black);
background: -o-linear-gradient(top, white, black);
background: -ms-linear-gradient(top, white, black);
background: linear-gradient(top, white, black);
Opet greška: background: linear-gradient(top, white, black);
i opet bez verzije koja bi radila na starijem Androidu.
Good catch. Ja sam isprobavao osnovnije stvari poput gornjeg primjera ali kao i svaki alat, ima svojih grešaka i treba sam poznavati i istražiti materiju.
OK. Samo što to nije ono što ja smatram pod “korisno za početnike”.
Pa čuj, upišeš ono šta znaš, dobiješ još pravila, pa pregledaš šta koji radi i za koji browser, ne može škoditi
Bok,
evo npr… za border-radius je dovoljno ovo ?
border-radius: 6px 6px 6px 6px;
-moz-border-radius: 6px 6px 6px 6px;
-webkit-border-radius: 6px 6px 6px 6px;
drugo više nebih trebao više ništa napisati za border radius da radi u svim browserima osim starih IE
za koje koristim PIE ?
kako u temi nemam box shadow, text shadow i sl…
mislim da je jedino border radius bio potreban napisati dodatno
s prefiksima, ostalo je standard.
hvala
Možeš to i skratiti:
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
Ako nećeš podržavati Firefox 3.6 i starije (oko 0,5% udjela u desktop browserima, to su valjda samo webmasteri koji još uvijek testiraju svoje stranice u starom FF-u ), možeš izbaciti -moz-border-radius.
-webkit-border-radius treba još jedino za Android 2.1 i starije (oko 3% udjela u Androidima)
[quote=“gambo”]Možeš to i skratiti:
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
Ako nećeš podržavati Firefox 3.6 i starije (oko 0,5% udjela u desktop browserima, to su valjda samo webmasteri koji još uvijek testiraju svoje stranice u starom FF-u ), možeš izbaciti -moz-border-radius.
-webkit-border-radius treba još jedino za Android 2.1 i starije (oko 3% udjela u Androidima)[/quote]
Hvala na pomoći
Nisam do sada imao iskustva sa pravljenjem rensponsive dizajna pa mi recite jel dobro pretpostavljam. U biti radi se kao običan sajt u htmlu samo se postavi da je uzak dug, širine 100%, i npr umjesto da ima 10 slika u jednom redu, u tom dizajnu se napravi da ide jedna slika ispod druge i slične sitnice… a onda se negdje u kodu pretpostavljam u headu ubaci neki kod da kad netko pristupa sa mobitelom da mu redirecta na tu verziju sajta, npr. na m.domena.com umjesto domena.com?
Pretpostavljam da nije potrebno nikakvo znanje u vezi mobilnih aplikacija?
Pa i ne bas.
Da bi koristio responzivan dizajn nisu ti potrebni neki subdomeni i posebne provjere sa kojeg uredjaja korisnik dolazi.Glavna stvar kod Responzivnog dizajna jeste postaviti pravilne (citaj standardne) breakpointse (tacke izmjene).Pomocu breakpointsa ti definiras kada ce se sadrzaj “lomiti” tj. pri kojim dimenzijama ce sadrzaj mijenjati svoj raspored.
Najbolje ti je uzmi Bootstrap i nemas brige.
Al i ovo moje mora funkcionirati? Mislim, ako stavim dužina 100%, veći font, slike jedna ispod druge biti će kao da je običan sajt samo čitljiv.
Nego zanima me ta opcija s kojom korisnike preko mobitela redirectam na m.sajt.com? Neki kod, nešto?
Pa sad, izgledati ce kao opca katastrofa.Jedno je responzivan dizajn a drugo je koristiti dimenzije u postotcima.
Sto se tice redirektanja - mozes sa PHP-om, a mozes i sa JS-om.Bitno je provjeriti sirinu prozora, te ako je ona manja od 768px onda ce te prebaciti na mobilnu verziju.
<script>
if(window.innerWidth < 768) {
document.location = "m.tvojsite.com";
}
</script>Ne vidim smisao redirektanja na poddomenu, to onda nije responzivni dizajn nego dizajn ala 2000-a, u danasnje doba ici raditi redirekt je suludo, osim u nekim specijalnim web app-ovima.
U tom slučaju bit će sranje za one koji na sajt dolaze preko PC-a.
Mislim da je najzgodnije koristiti @media
Pojednostavljeno rečeno… Dizajniraš za PC. Tako da bude 10 slika u jednom redu.
Za one koji sajt pregledavaju tabletom u landscape orijentaciji, sa @media screen and (max-width: 980px) mijenjaš CSS tako da oni imaju 6 slika u jednom redu.
Za one koji sajt pregledavaju tabletom u portrait orijentaciji, sa @media screen and (max-width: 880px) mijenjaš CSS tako da oni imaju 4 slike u jednom redu.
Za one koji sajt pregledavaju smartphoneom ili malim tabletom, sa @media screen and (max-width: 620px) mijenjaš CSS tako da oni imaju 1 sliku u jednom redu.
Evo nekoliko primjera: http://responsivedesign.is/examples
Najbolje je da skineš neki free template pa proučiš što se događa kad mijenjaš dimenzije browsera i zašto.
Za one koji će prigovarati ovome što sam napisao: ovo je pojednostavljeno samo da bi se shvatilo što je zapravo responzivni dizajn.
To nema veze sa responzivnim dzajnom i bolje je ne koristiti.
Za PC bi bio glavni sajt, mobilni nebi imao nikakvog utjecanja na njega, mobilni bi se radio po glavnom. Za tablete nema potrebe, dovoljno su veliki da i glavni sajt bude pregledan.
Evo npr.
sajt: rentaboat-adriatic.com
mobilna verzija
Znaći koriste se samo elementi sa glavne stranice, samo se drugačije rasporedu. Ne vidim razloga zašto to nebi bilo funkcionalno.