DEV Community

Discussion on: What's the one thing you always need to google?

Collapse
 
nasoma profile image
nasoma

CSS media queries, my brain just can't get it.

Collapse
 
cubiclesocial profile image
cubiclesocial

Trying to use 'min-width' is just asking for all kinds of trouble.

Stick to sporadic 'max-width' media queries - it's a lot easier on the brain. Design for "desktop-first" but plan ahead with your design so that it can be made responsive (e.g. no tables). At various points during development, shrink the browser width to a point where things scrunch up too much, look at the computed layout tab in Dev Tools to get the pixel width of the body element, add a new 'max-width' media query to your CSS at that width, and add some CSS rules to clean up the way it looks at that point. Once satisfied, keep shrinking the browser window until it gets scrunched up again and repeat the process. My experience is that it requires only a half-dozen rules across 2-3 'max-width' media query sets to get a site to be fully responsive. Then throw the website on a phone to see how it looks there just in case the phone tries styling some things differently.