☰

» »

Ne zazna css responsive media-query

Ne zazna css responsive media-query

Jerry000 ::

Za foro sem probal narediti responsive stran. Naredil sem hitri markup kjer imam .wrap header, main, aside ter footer elemente. Wrap imam nastavljeno širino na 980px ter margun na 0 auto. .main ter aside imata pa float left, righr. Nato sem vse to v css malo oblikoval. Nato sem naredil posebej .css file za media-query in ga vključil v html enako kot prejšnji css dokument. Nato sem v ta media-query.css napisal tole:

@media screen and (max-width: 980px) {
	header{
		width: 100%;
	}

	.main{
		width: 90%
	}

	aside{
		width: 10%
	}

	footer{
	width: 100%;
	}
}



Ko okno brskalnika zmanjšam se nič ne zgodi. Če sem prav razumel, prva vrstica pomeni "če je okno manjše od 980px, naredi to".
Se kdo spozna na to? Ali sem kaj pozabil napisat/dodat? Prosim za pomoč

  • spremenil: Jerry000 ()

neoserv ::

Sem preveril v moji kodi in mi točno tak način deluje.
Le da imam kodo za manjše zaslone na koncu iste CSS datoteke kot ves ostali CSS.

Nima smisla imeti tega v 2 datotekah, razen če sta obe datoteki veliki.
NEOSERV.SI = Prijazno & hitro SSD gostovanje že 15. leto.
900+ domenskih končnic po noro nizkih cenah!
Brezplačna selitev od starega ponudnika.

JayKay ::

vsi trije nacini kako delat s media queries http://stackoverflow.com/questions/1160...

Jerry000 ::

Zanimivo...men pa ne deluje, sem pa ugotovil da deluje, če v css določim širino kot max-width namesto width. Ali je to legit responsive? Je dobra praksa to če se uporablja media-query? Al je boljši kak drug pristop?

JayKay ::

oboje more delat. preveri tu

Jerry000 ::

JayKay je izjavil:

oboje more delat. preveri tu



Hm...zdej ne vem al narobe gledam al res ne vidim...ti sploh nimaš podan width...sam za body maš width. Drgač pa dober CV, clean & simple:). Čudno, men je prjel sam ko sm določu max-width. Bom še 1x probal

D-monLord ::

Ne pozabi dopisat:

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
</head>


css:
@media screen and (max-width: 400px) {
 /* small screen */
}

@media screen and (min-width: 401px) {
 /* big screen */
}

Vredno ogleda ...

TemaSporočilaOglediZadnje sporočilo
TemaSporočilaOglediZadnje sporočilo
»

Responsive slo-tech

Oddelek: Izdelava spletišč		314917 (3791) Netrunner
»

Kako narediti to stran "resposive"?

Oddelek: Izdelava spletišč		51038 (929) zzbil
»

Prikaz spletne strani na mobilnem terminalu

Oddelek: Izdelava spletišč		173537 (2831) 4kik4
»

Prikaz strani na različni resoluciji-Joomla

Oddelek: Izdelava spletišč		151952 (1680) kr?en
»

CSS - DIV - Brez Tabele

Oddelek: Izdelava spletišč		231598 (1301) jernejp

Več podobnih tem