WP-Mix

@media queries are instrumental in creating responsive CSS designs. This tutorial explains how to combine multiple media queries to keep things optimized.

Let’s say that you have the following media queries:

@media (max-width: 920px) {
	body { background-color: blue; }
}
@media (device-width: 768px) and (device-height: 1024px) and (orientation: landscape) {
	body { background-color: blue; }
}

Such that, say, the default body background color is red, but you want it to be blue for these specific media queries. Given this scenario, we can optimize file size by combining these media queries like so:

@media (max-width: 920px), (device-width: 768px) and (device-height: 1024px) and (orientation: landscape) {
	body { background-color: blue; }
}

The key here is to use a comma , between multiple @media selectors. That enables you to combine as many media queries as desired. This may not seem like a big deal for a simple one-property example, but when each query contains numerous overlapping properties, the savings can be significant.