Εισαγωγή στα Media Queries στο CSS

Υπάρχει μια ειδική εντολή @media, η οποία επιτρέπει την εκτέλεση διαφορετικού κώδικα ανάλογα με το πλάτος της οθόνης.

Στο επόμενο παράδειγμα, κάποιος κώδικας θα εκτελεστεί αν το πλάτος της οθόνης είναι από 300px έως 1200px:

@media (min-width: 300px) and (max-width: 1200px) {
	/* some code */
}

Στο επόμενο παράδειγμα, κάποιος κώδικας θα εκτελεστεί αν το πλάτος της οθόνης είναι μεγαλύτερο από 300px:

@media (min-width: 300px) {
	/* some code */
}

Στο επόμενο παράδειγμα, κάποιος κώδικας θα εκτελεστεί αν το πλάτος της οθόνης είναι μικρότερο από 1200px:

@media (max-width: 1200px) {
	/* some code */
}

Ας γράψουμε στον media query μας κάποιον κώδικα. Για παράδειγμα, για συγκεκριμένα μεγέθη οθόνης, θα βάψουμε τις παραγράφους με κόκκινο χρώμα:

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

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

Τώρα ας βάψουμε τις παραγράφους με διαφορετικά χρώματα ανάλογα με το πλάτος της οθόνης:

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

Αφήστε τον ακόλουθο κώδικα να εφαρμοστεί σε οθόνη με πλάτος από 0 έως 800px:

p {
	font-size: 20px;
}

Και ο ακόλουθος κώδικας ας εφαρμοστεί σε οθόνη με πλάτος 800px και περισσότερο:

p {
	font-size: 30px;
}

Αφήστε τον ακόλουθο κώδικα να εφαρμοστεί σε οθόνη με πλάτος από 0 έως 500px:

p {
	font-size: 15px;
}

Ο ακόλουθος κώδικας ας εφαρμοστεί σε οθόνη με πλάτος από 500px έως 900px:

p {
	font-size: 20px;
}

Ο ακόλουθος κώδικας ας εφαρμοστεί σε οθόνη με πλάτος 900px και περισσότερο:

p {
	font-size: 30px;
}