[ alfa-pro @ 27.05.2013. 17:18 ] @
Jel moze neko da mi pojasni neke stvari oko Media Queries.
Ja do sada na mojim sajtovima sam koristio % da bi mi sajt izgledao ok u ostalim rezolucijama. Sada zelim da uradim isto to ali i za mobilne uredjaje.

Npr meni nije jasno jel Media Q sam detektuje rezoluciju i ucitava dati media stil?

Kao primer ja napravim

Code:
     
@media only screen and (max-device-width: 1280px) {
        
         div.main-wrapper {
             width: 80%;
         }
    }


Code:

<link rel="stylesheet" href="<?php echo $this->baseurl?>/templates/<?php echo $this->template ?>/css/delix_main_layout.css"
    type="text/css" media="only screen and (max-device-width: 1280px)">


Sta ako ja imam jos media sa max-device-width: 480px ili 360px? Jel ce on sam da detektuje i ucita odredjeni @media stil?

Iskreno ja nekapiram ovo, googlao sam ali malo mi sve konfuzno, zakucao sam u jedno mesto.

Jel moze neko da mi pojasni i da mi da neki primer.

Hvala puno
[ deZio @ 13.06.2013. 22:12 ] @
Da, samo se detektuje i izvršava.

Ukoliko imaš više MQ, izvršavaju se svi koji zadovoljavaju zadati kriterijum, tj. ako pristupaš sa uređaja koji ima širinu od npr. 360px, izvršavaće se svi MQ koji imaju max-device-width veći ili jednak od 360px
[ Zeberdee @ 29.07.2013. 20:34 ] @
Najbolje bi bilo da koristis mq ovako :


@media all and (max-width: 1280px) and (min-width: 700px ) {

div.main-wrapper {
width: 80%;
}

}

Sto bi znacilo da ce ovi stilovi biti "aktivirani" samo ako je width ekrana, odnosno vidljivog dela u browser-u izmedju 1280px i 700px.
U slucaju da rezolucija padne na manje od ove velicine, u ovom slucaju ispod 700px, bice primenjeni default stilovi koje si ti iskodirao kada si kodirao stranicu, i pre nego sto si presao na mq.

Ja radim tako sto iskodiram celu stranu, i onda se bacim na mq, sto bi recimo izgledalo ovako:


@media all and (min-width: 1280px) {

// pa neki kod ovde koji se aktivira kad je ekran siri od 1280px ...

}

@media all and (max-width: 1023px) and (min-width: 765px ) {

// .....

}

@media all and (max-width: 764px) and (min-width: 640px ) {

// .....

}

Ovako mozes da lako kontrolises mq i da im zadas kada ce da se "aktiviraju" u odnosu na tvoj default kod.

Znaci ako u zagradama () napises min-width, ili min-device-width, to znaci da ce se taj css "aktivirati" samo ako width predje iznad u zagradi zadate velicine ( u ovom slucaju 1280px), koja oznacava najmanju sirinu (width) strane koja je potrebna da bi on bio aktiviran.

A ako napises ovako : @media all and (max-width: 1023px) and (min-width: 765px ) to znaci da ce se aktivirati samo izmedju te dve navedene rezolucije.

Isto vazi i za max width i max-device-width, da ce se aktivirati samo ako je width ekrana manji ili isti kao cifra u pikselima koja je navedena u zagradi.

Nadam se da sam ti pomogao ... :D