If we take a look at the example query in the previous section, we see that part of it is made up of the type of media in use. This is just part of the query. All media queries come in two parts, with the first part controlling how our CSS will be displayed, with the second part taking care of when it is displayed.

Take a look at this example:

<!-- CSS media query on a link element --> 
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" /> 
 
<!-- CSS media query within a stylesheet --> 
<style> 
@media (max-width: 757px) { 
  .sidebar { 
    display: none; 
  } 
} 
</style> 

This illustrates two ways of referencing media queries: the first example doesn't specify the media type, so we can infer it will be all by default; the second part of it states that it will only apply when the width of our window is at least 800px.

The second media query one doesn't specify the media type either, so again all will be inferred as the default; this time, the .sidebar element will not be displayed if the window width is less than 600px wide.

Let's see what all media types can be used:

In addition, to this, we have a number of features that we can use to control the trigger for displaying the content; it's worth getting to know them, as they all play an important role, but work in different ways. Let's take a look at the list in more detail and learn what each of them does in turn.

Adding a query that specifies the media target is only half the picture; we also need to give it something that controls when to display it! To achieve this, we can provide one or more conditions that must be satisfied in order for content to be styled or displayed.

Let's have a look at some of the options available:

The key here is selecting the right attribute against which we should run our test; a great example is checking orientation so that we can determine if a tablet is in portrait or landscape mode. We will make good use of some of these query tests later in this chapter.

Okay, time to move on. The theme so far has been what we can achieve by just using a browser and a text editor. This may seem limiting at first, but I maintain that too many people resort to using additional help (such as using jQuery) to create queries when it isn't always necessary to do so. In the main this will work, but there are some points that we should consider:

Okay, let's move on: it's time to get physical, and stuck into something more practical! We've covered some of the different facets that make up queries and explored some of the considerations we need to allow for, when working with just a browser and text editor. Before we get too practical though, we need to cover one more topic. There are occasions when we need to test for multiple conditions. We can do this using logical operators. Let's take a quick look at some of these in more detail.

When composing media queries that require multiple tests, we can make use of logical operators to confirm if one or more CSS rules should be applied to our content. If we use logical operators, we need to encapsulate each attribute that is tested in parentheses; otherwise, it will generate an error in our code.

Let's take a look at some of the more common examples of operators:

So far, we've talked about the basics of what a media query looks like: let's explore how we can use them to manage content by identifying where our designs break at different screen sizes. These breaks, or breakpoints,are what make media queries work – whilst it is clearly key that we get them right, it is also important to know when we should and should not use them...