How I code responsive post image

How I code responsive

Posted on:

We have this discussion a lot at work. Min width or max width, or a bit of both. Its a 50/50 split and really its just up to the developer and what they prefer.

Personally I like min-width. I prefer to code a site for mobile and add min-width media queries at breakpoints for devices, getting bigger as I go. I find it easier for some reason to use min-widths. Having no floats or widths to begin with, then adding them as the browser window gets bigger.

Usually on a mobile design everything is stacked with maybe a few sections turned off. As the device or browser window gets bigger, I increase things like font sizes, padding, margin and add in percentage widths for sections.

Here is an example –

 

The break points I use are usually –

@media (min-width:480px) {}

@media (min-width:640px) {}

@media (min-width:768px) {}

@media (min-width:1024px) {}

@media (min-width:1280px) {}

These are my main break points but depending on the design, I may add in some different ones to help with the layout.