CSS'de Medya Sorgularına Giriş

Ekran genişliğine bağlı olarak farklı kod çalıştırmaya izin veren özel bir @media komutu vardır.

Aşağıdaki örnekte, bazı kodlar yalnızca ekran genişliği 300px ile 1200px arasındaysa çalışacaktır:

@media (min-width: 300px) and (max-width: 1200px) {
	/* bazı kodlar */
}

Aşağıdaki örnekte, bazı kodlar yalnızca ekran genişliği 300px'den büyükse çalışacaktır:

@media (min-width: 300px) {
	/* bazı kodlar */
}

Aşağıdaki örnekte, bazı kodlar yalnızca ekran genişliği 1200px'den küçükse çalışacaktır:

@media (max-width: 1200px) {
	/* bazı kodlar */
}

Medya sorgumuza bir kod yazalım. Örneğin, belirli ekran boyutlarında paragrafları kırmızı renge boyayalım:

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

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

Şimdi de paragrafları ekran genişliğine bağlı olarak farklı renklere boyayalım:

@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;
	}
}

Aşağıdaki kodun 0 ile 800px genişliğindeki ekranlarda uygulanmasını sağlayın:

p {
	font-size: 20px;
}

Aşağıdaki kodun ise 800px ve üzeri genişlikteki ekranlarda uygulanmasını sağlayın:

p {
	font-size: 30px;
}

Aşağıdaki kodun 0 ile 500px genişliğindeki ekranlarda uygulanmasını sağlayın:

p {
	font-size: 15px;
}

Aşağıdaki kodun 500px ile 900px genişliğindeki ekranlarda uygulanmasını sağlayın:

p {
	font-size: 20px;
}

Aşağıdaki kodun ise 900px ve üzeri genişlikteki ekranlarda uygulanmasını sağlayın:

p {
	font-size: 30px;
}