{"id":9732,"date":"2014-07-30T07:27:59","date_gmt":"2014-07-30T14:27:59","guid":{"rendered":"\/?p=9732"},"modified":"2017-10-13T08:24:30","modified_gmt":"2017-10-13T15:24:30","slug":"write-media-queries-right","status":"publish","type":"post","link":"https:\/\/needmoredesigns.com\/write-media-queries-right\/","title":{"rendered":"Write Media Queries Right"},"content":{"rendered":"
We’ve completely changed\u00a0the way we write responsive breakpoints here in the studio. Looking back at our former agony, our previous method is practically dark ages material. We’re here to show you a better way.<\/p>\n
It’s often written\u2014and possibly accepted as best-practice\u2014that you should separate your media queries by device class. You might have a “small” and a “medium” and a “large” file, for instance, and you include each one in turn, so that you’re including some base CSS files, along with a series of files for each device.<\/p>\n
The problem is that, if you are looking for what’s influencing a particular element on the screen, you often have to dig through each of those files. This is because I often define a simple set of rules for the smallest device (phone), and then a series of rules for each larger size. So you might have to look at a lot of files, digging through each, to find your rule.<\/p>\n