Hyrje në Media Queries në CSS

Ekziston një komandë e veçantë @media, që lejon ekzekutimin e kodit të ndryshëm në varësi të gjerësisë së ekranit.

Në shembullin vijues, një kod i caktuar do të ekzekutohet nëse gjerësia e ekranit është nga 300px deri në 1200px:

@media (min-width: 300px) and (max-width: 1200px) {
	/* kod i caktuar */
}

Në shembullin vijues, një kod i caktuar do të ekzekutohet nëse gjerësia e ekranit është më e madhe se 300px:

@media (min-width: 300px) {
	/* kod i caktuar */
}

Në shembullin vijues, një kod i caktuar do të ekzekutohet nëse gjerësia e ekranit është më e vogël se 1200px:

@media (max-width: 1200px) {
	/* kod i caktuar */
}

Le të shkruajmë një kod të caktuar në media query-n tonë. Për shembull, në përmasa të caktuara të ekranit do t'i ngjyrosim paragrafët me ngjyrë të kuqe:

@media (min-width: 300px) and (max-width: 1200px) {
	p {
		color: red;
	}
}

@media (min-width: 300px) and (max-width: 1200px) {
	p {
		color: red;
	}
}

Tani le t'i ngjyrosim paragrafët me ngjyra të ndryshme në varësi të gjerësisë së ekranit:

@media (max-width: 300px) {
	p {
		color: red;
	}
}
@media (min-width: 300px) and (max-width: 900px) {
	p {
		color: green;
	}
}
@media (min-width: 900px) and (max-width: 1200px) {
	p {
		color: blue;
	}
}
@media (min-width: 1200px) {
	p {
		color: orange;
	}
}

Le të aplikohet kodi vijues në një ekran me gjerësi nga 0 deri në 800px:

p {
	font-size: 20px;
}

Le të aplikohet kodi vijues në një ekran me gjerësi prej 800px e lart:

p {
	font-size: 30px;
}

Le të aplikohet kodi vijues në një ekran me gjerësi nga 0 deri në 500px:

p {
	font-size: 15px;
}

Le të aplikohet kodi vijues në një ekran me gjerësi nga 500px deri në 900px:

p {
	font-size: 20px;
}

Le të aplikohet kodi vijues në një ekran me gjerësi prej 900px e lart:

p {
	font-size: 30px;
}