Need simplification for writing media queries

Is there any simplification for writing media queries for resolution instead of each resolution?

You should build a fluid website. Take your browser (during testing) and make it smaller/larger. See something break (e.g. 600px and under)? Find the optimal fix that will fix the issue. Simple as that.

Think the trick is mobile first where most elements will be block with 100% width and then to use media queries that change the widths and more than likely change the display to float or inline-blocks at wider views

It’s a THINKING process , as opposed to a coding process.

Many people mistake responsive design for FLUID design ( which is what Ryan first mentioned). You can either build your site (mostly) based on % widths or mostly around break points ( it looks this way at this viewport width, that way at another).

It’s a good practice to think of your (multiple layouts) before you even start to code, so that the break point aren’t so jagged. Thinking of breakpoints that are common denominator units of your grid is another useful trick. For example, you have column’s that are 160px wide at your layout’s max-width. you could consider break points at: 320px, 480px, 640px, 960px ( or 2x colW 3x colW, 4x colW, 6colW)

hope that helps!

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.