Working with media queries and min-width

Media queries are an amazing tool that front-end developers have at their disposal these days, but I think most front-end developers who decide to dig into media queries aren’t ready to completely eschew the way they’ve been working. In my case, as with many, I’ve grown accustomed to designing and coding to some sort of grid which is usually around 960px wide. As a result, when trying to add in @media queries to my workflow, my first instinct was to start with one of those fixed-width designs and figure out how to scale it down. Using the @media rule plus ‘max-width’ allows us to do this. (If you need a quick primer on @media queries, this is a good start.) Starting from a site that is 960px wide, if we want to make it scale down for a smaller screen we can do something like this:


#container {
        width: 960px;
        margin: 0 auto;
        background: #ccc;
}

@media only screen and (max-width: 480px) {
#container {
        width: 100%;
        background: #aaa;
}

}

View Example 1 – Resize browser to see it in action

We’ve defined our styles for the ‘main’ resolution, and overridden them inside the @media query for all screen resolutions up to a maximum width of 480px. So we’ve got two places in our css where we’ve defined the width of #container. This totally works but if you do it a few times you quickly realize this is not very efficient and starts to feel like a lot of redundant work. For example, lets say you have a 2 column block, each element floated within it with a width set on each one. (Notice I’ve changed ‘width’ to ‘max-width’ on the #container. This gets us closer to a fluid/responsive layout. Resize and you’ll see.)


#container {
	max-width: 960px;
	margin: 0 auto;
	background: #ccc;
	overflow: auto;
}

section {
	width: 70%;
	float: left;
	background: #eee;
}

aside {
	width: 30%;
	float: left;
	background: #bbb;
}

@media only screen and (max-width: 480px) {
	#container {
		width: 100%;
		background: #aaa;
	}
	
	section,
	aside {
		width: 100%;
	
	}

}

View Example 2 – Resize browser to see it in action

Inside the @media block targeting smaller screens, we’ve overridden all of the values set for the larger screen. In this case it would mean re-setting float, width, and in a real world example things like padding, margin and backgrounds. Why should we do this when can take advantage of the natural state of these elements? All block-level elements, by default, are not floated and have a default width of 100% and this is usually what you want to serve up to the smallest screens, since there’s usually not room to have stuff floated all over the place.


Interested in more than just height-based media queries? Join us at BDConf in Nashville, June 19-20, 2015, for a unique look at the future of mobile design.

A better way

Instead of starting big and using ‘max-width’ to hack away, a better approach is to start small and ‘min-width’ to target ever larger devices. As opposed to ‘max-width’, ‘min-width’ says ‘apply these styles to all screens that are greater than whatever value’.

The way it works in practice is that we can put all of the baseline styles at the top of your css, outside of the @media queries. This is where you can define your basic typography, colors and your general hierarchy. Then for each @media rule you can add as screens get larger. Using @media with min-width we end up with something like this:


#container {
	background: #aaa;
}

section { 
	background: #eee; 
}

aside { 
	background: #bbb; 
}

@media only screen and (min-width: 480px) {
	
	#container {
		max-width: 960px;
		margin: 0 auto;
		background: #ccc;
		overflow: auto;
	}
	
	section {
		width: 70%;
		float: left;

	}
	
	aside {
		width: 30%;
		float: left;
	}
	

}

View Example 3 – Resize browser to see it in action

The end result of the last two examples is functionally identical, but using min-width is a much more elegant solution. Notice that that the background colors are being set just to show a difference between the elements. There isn’t anything at the top of the css in regards to layout. Starting small with min-width reduces redundancy and enables you to focus on structuring your markup logically. It also ensures that many more screen and form factors are taken into account from the beginning as opposed to being an afterthought. Another bonus is that for devices that may not support media queries, you can still serve up a base set of styles that will more likely work that a full site.

Honestly it took me a while to wrap my head around this concept. So in preparation for this article I worked up this little demo that shows it in action.

View Responsive Demo using @media and min-width

Download (3.87KB .zip file)

For more information on a similar topic, check out Mobile First by Luke Wroblewski and make sure to read Ethan Marcotte’s book Responsive Web Design.

Author

Jay Barry

I design and code things for the internet. Aside from writing and reviewing here on UnmatchedStyle, I play drums in a band called Lunch Money.