How would I use a media query to make my entire theme responsive or fluid? [closed]

You can use media queries to change the styling per element depending upon specifications. You would have to add these to the bottom of your stylesheet, so that it overwrites your default styles depending upon the screensize

This following media-queries template from bootstrap is only based on screen size. You can use more complex media-queries to target specific device as well.

To Support older browsers (IE), you’d have to use conditional statements to include respond.js or media-queries.js . Media queries will only work with device specifications such as screen, handheld etc…

A great place to start is: http://alistapart.com/article/responsive-web-design

Eg: Bootstrap Media queries.
/* Large desktop */
@media (min-width: 1200px) { … }

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }

/* Landscape phones and down */
@media (max-width: 480px) { ... }