Using CSS Media Queries for Responsive UI Design

Using something like Bootstrap for a responsive UI covers most of the bases. But if you need more control, it’s a good idea to get familiar with Media Queries in CSS. It might come in handy some time, plus that is what Bootstrap uses under the hood as well, and it never hurts to learn how the tools you use work. The Mozilla page on media queries goes into just the right amount of detail and gives you a good outline of everything you can do with it.

To be very brief though, here is how you use a media query in CSS:

@media query { normal-css }

This scopes it so that the CSS within the query (i.e. normal-css above) is applied only when the condition dictated by query is true. So, you could use it to say apply this style when the width or height or in a given range, or if we’re using a given type of device, or color setting, and so on.

The following, for example, sets the background color of the body to red only when the view area width is 300 pixels or more (stupid usage scenario, I know, but you get the point as to how this could be used to make your UI responsive in all sorts of ways):

@media (min-width: 300px) { 
   body {
	 background-color: red;
   }
}

A powerful tool to have in your chest when building user interfaces.