CSS Media Queries

CSS Media Queries 27.05.2013. u 18:18 · pre 163 meseca #1

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

Potpis

Kada vidjamo uvek ista lica, na kraju ona postaju deo našeg života. A kada postanu
deo našeg života,
onda žele i da nam ga izmene. I ako ne bude po njihovom, nije im pravo. Jer, svaki
čovek ima tačnu predstavu kako bi trebalo da živimo svoj život. A nikad nemaju pojma
kako treba da prožive sopstveni život.

Re: CSS Media Queries 13.06.2013. u 23:12 · pre 162 meseca #2

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

Re: CSS Media Queries 29.07.2013. u 21:34 · pre 161 mesec #3

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

Potpis

http://www.behance.net/MiselTekinder

Forum kao aplikacija na telefonu

Srodne teme