In many instances, we can satisfy our requirements with the use of a text editor and browser; the latter's device mode (or responsive mode) will play a big part in creating perfectly valid queries that will suit many sites.
However, there will be occasions where this won't be enough. We may need to rely on additional help to support media queries for a particular project. One must ask, though, if this is really necessary, and not simply an excuse to be lazy. The media query support in recent browsers is very solid!
This said, if we have to use outside help, then there are plenty of options available online. Let's take a look at a few examples:
- Plain JavaScript or jQuery: It goes without saying, but most solutions will be based on either of these two technologies; these will, of course, be obvious choices! The point to note, though, is that jQuery was always designed to complement sites, and not play a core part in their design; one might argue that creating media queries is not a good use of jQuery for this reason.
- .resizr (http://resizr.co/): This website is one of many we can use to get a feel for how well our site might work on a range of mobile devices; it does rely on you having a site that is accessible to the Internet, and there is no substitute for the real thing! It is a good start though, so when you get to test your site on real devices, it should mean that many of the basic issues have been resolved.
- What's My Device Pixel Ratio?: Hosted at http://devicepixelratio.com/, this tool works out what your screen's device ratio setting is capable of supporting. This is perfect for those instances where we may want to use high-res images. After all, there is no point using them if your chosen device can't display them!
- Mediaqueri.es: Hosted at http://mediaqueri.es/, this website should be in any developer's armory. It is a display of inspirational sites that use media queries and RWD.
- Modernizr: Available from http://www.modernizr.com, we can use the library to test for media query support; an alternative is to use the
@supportsdirective. In most cases, it will be older versions of IE that cause issues. If we plan our site with care, we may be able to design out the need for either, by providing a base site that works in IE, and adding extra touches on top for other browsers. - Restive.js: From http://restivejs.com/, this jQuery-based plugin is a real Swiss Army knife of functionality, and allows you to add responsive support for different aspects of your sites.
- Responsive design patterns: The agency Code My Views, based in the USA, created a number of patterns for use in responsive design; this may be worth a look once you are more accustomed to working with media queries. You can see more details at https://codemyviews.com/blog/5-really-useful-responsive-web-design-patterns.
Whichever way you decide to go, there are plenty of options available online, to help with developing your media queries. The key here though is to be sure that if you are adding an additional library, then it is the right thing to do for your site; it will probably center around whether your project must support old browsers such as IE8. This browser has been around since 2009, and should really be put out to pasture—permanently!