A media query consists of a media type and at least one expression that limits the style sheets' scope by using media features, such as width, height, and color. Media queries, added in CSS3, let the presentation of content be tailored to a specific range of output devices without having to change the content itself.
Media queries consist of a media type and can, as of the CSS3 specification, contain one or more expressions, expressed as media features, which resolve to either true or false. The result of the query is true if the media type specified in the media query matches the type of device the document is being displayed on and all expressions in the media query are true.
When a media query is true, the corresponding style sheet or style rules are applied, following the normal cascading rules. Style sheets with media queries attached to their tags will still download even if their media queries would return false (they will not apply, however).
Unless you use the not or only operators, the media type is optional and the all type will be implied.
When designing a responsive site, you will need what are called breakpoints. These are to create layout changes, moving from a one column format in mobile, to a two column format in tablet, for example.
What determines your break points is the content in your site. When you play around with a liquid layout at a certain point the site won't look good. You then create a breakpoint in order to facilitate a layout change to one that is more esthetically pleasing.
NOW!
Media queries are one of the three componants of responsive design. You'll be using them from here on out... that is until something better comes along - but I don't see that happening in the near future.