How to list media queries when using min-width?

[Geek Dom]

This might be a silly question but is there a right way to add media queries when using 'min-width' like in the updated sample theme. Should you start with the highest width first or lowest width?

@media only screen and (min-width: 1032px)

@media only screen and (min-width: 960px)

@media only screen and (min-width: 768px)

or

@media only screen and (min-width: 768px)

@media only screen and (min-width: 960px)

@media only screen and (min-width: 1032px)

[Terry]

Hi Geekdom,

To share some things I've learned about Responsive Design... (There are many great books and articles, if you want to delve deeper the folks over at A List Apart have some of the best)

If you're using a Mobile First responsive approach your min-width media queries will start small and grow... Your approach is starting with the smallest mobile screen and growing with increased screen size. Like a waterfall, each previous query is applied to the next graduation and added to.

If you're using a Desktop first, you max-width queries will start large and decrease. Here your approach is to design first for the desktop, working larger to smaller.

In both cases your core css remains above the media queries.

Hope this helps.

[Brad Dalton]

Look in the new Genesis Sample theme which uses min-width https://github.com/copyblogger/genesis-sample/blob/develop/style.css#L1438

---

Tutorials for StudioPress Themes.

[Author]

Posts