MAX to MIN Media queries CSS

Question

I'm attempting to use a MOBILE first approach to responsive design.

In doing so, I wish to convert my MAX media queries to MIN media queries.
Therefore, instead of using graceful degradation, I aim to implement progressive enhancement

Can anyone explain the best way to re-engineer my CSS to use MIN-width media queries as opposed to MAX-width?

In the example below I have trimmed out 95% of the css and have left the breakpoints

//------------------------------MAIN CSS

html {
    box-sizing: border-box; /* apply borderbox  to * */
}

*, *:before, *:after {
    box-sizing: inherit;
}}

// --------------------------------MEDIA

@media screen and (max-width: 740px) {

#body {
    display:none!important;
} } 

// --------------------------------MEDIA

@media screen and (max-width: 600px) {

#header {
    height: 17.3em;
} } 

Answer 1

It totally depends on the rest of your site. Some sites can be displayed well at the width of 400px while some others need to set a minumum because it's too small to render the document objects in a clean manner. Very often you will not even need to use min-width or max-width when optimizing for mobile, there are far more better practices. Here are some of them:

Use Em over Px - It is always better to set font-size and other sizes in units of "em" rather than in "px". This is because a pixel is extremely small on a cell phone, whereas em units proportionally adjusts the object to a size that fits the screen.

Use Percentages - You'll find that using percentages are far more friendly than, for instance, specifying the width or height of an element in pixels or em. If you use percentages, your content will always adjust well in for skinny displays.

Avoid Absolutely Positioned Elements - Having elements positioned absolutely can be more difficuly to handle on small displays. It simply can, as the absolute elements may get too near to the relatively positioned elements. Use relative positioning as much as possible for a clean site.

Answer 2

@media MIN-width:

Min-width media queries are very easy, to use, and are not too different from using MAX media queries.

Here is an example using your code:

@media only screen and (min-width: 740px) {
    /*Your CSS for all screens larger than this*/
}

@media only screen and (max-width: 740px) {
    /*Your CSS for all things smaller than 740px*/
}

@media only screen and (max-width: 600px) {
    /*Your CSS for all things smaller than 600px*/
}

It is important to still use max-width to create limits for the style of objects on certain screens. Using min-width can be especially useful if you want certain styles to apply to a smaller object and then have that same style apply to a larger object. This way you can keep the styles for that minimum size but also add on extra styles to the larger object with out effecting the smaller one.

For example:

@media only screen and (min-width: 900px) {
    /*You CSS here*/
}

In the above example, the styles from screens with a size of over 740px will already be applied to any screens with a size of over 900px. From there you can adjust your styles as you like, reducing the amount of code needed to produce the page.

Other Things:

-When it comes to actual elements on the screen (excluding min/max-sizes with @media) it can always be helpful to use percentages, because that way items can be auto re-sized according to the screen size.

-Here is a great website that will help you on your endeavours with media queries: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/