Media Queries

Introduction

In the context of CSS, media refers to the device being used to consume the website. For example, if a user is on a mobile device, their phone is their medium. If they are viewing a printed web page, the paper is the medium.

So-called media queries allow us to customize the appearance of HTML content for multiple devices. Although media queries may sound like a complicated concept, the idea is quite simple.

Media Queries

Here is the syntax for a media query:

	@media (min-width: 600px) and (max-width: 1200px) {
	}

You will see several attributes we may include in a media query. These include minimum and maximum width, device orientation (for example, if the target is a handheld or wearable device) and many other properties.

Breakpoints

We may refer to each media query as defining one or multiple breakpoints. The term breakpoint refers to the viewport size (width and height), and you can set points where the appearance of the CSS should change. Let’s say the viewport width is under 600px; the page content should be displayed as a column rather than a row.

	.container {
	  display: flex;
	}
	@media (max-width: 600px) {
	  .container {
	    flex-direction: column;
	  }
	}

The breakpoint here is set at 600px width, and the code within the media query should only be applied when for screen sizes up to 600px, hence using the max-width attribute. Mobile devices are mostly under 600px in display width, so the code inside the media query would be applied using max-width: 600px. If you’d use the min-width attribute instead, flex-direction: column; will only be applied if the viewport width is at a minimum of 600px.

Let’s further break down what we see in the example above.

When initializing a media query, we use the “@” alpha symbol with “media”. The alpha symbol is used extensively in CSS frameworks, such as SASS, which you will learn about later in the course.

Conditions

As mentioned, we have conditions inside the media query parenthesis. Conditionals are a core concept of programming, which will be covered in detail once you start with JavaScript. However, as you need to understand what’s happening here, you’ll get a brief explanation. In simple terms, we check if a condition is true or not. Let’s look at a real-life example; if your driving speed is higher than the speed limit, you might get a fine, but only if you are caught. So the condition for getting a speeding ticket is your speed, and you’re being caught speeding. In most programming languages, we would write conditionals using something called an if... else statement; if(condition is true), then (do something). Take this example from JavaScript. Note: the > greater-than” sign.

	if (speed > speedLimit) {
	  if (caught) {
	    getFined();
	  } else {
	    arriveFaster();
	  }
	} else {
	  arriveSlower();
	}

The same principle goes for the conditions inside of the media queries: @media (max-width: 600px) can be written as, if(width < 600px) { do something }

Images

Any CSS property you set outside of the media query can be overridden inside of the media query, which can be very useful. We have already looked at changing the flex-direction property. You can also change the background image of an element.

	.container {
	  background-image: url('../media/big.jpg');
	}
	@media (max-width: 600px) {
	  .container {
	    background-image: url('../media/small.jpg');
	  }
	}

As we have seen with Working with CSS and images, we may farm out images to CSS instead of embedding them in HTML. We can take this further by using media queries to define different images for different breakpoints, which is immensely useful. As a simple example, smaller images that download more quickly may be specified for mobile devices, making for lighter and quicker content to load. In the code above, you can see that we load a small image on smaller viewports and a bigger one on larger viewports.

Generally speaking, it is best to design for the smallest viewports (mobile-sized devices at the moment, but maybe watches soon) first and create rules for progressively larger screen sizes. The argument for this is twofold: first, you will focus on a limited-size viewport, which will force you to consider the essentials. Second, people spend so much time with their mobile devices, so your website should be optimal on a mobile device viewport. The more appealing your content is on any device, the more chance people will use it on all types of devices.

META attributes for Responsive CSS

We have already looked at uses for the <meta> element. The <meta> element may also contain information about how the page should be displayed, which is critical to the optimal functionality of responsive sites.

While media queries help create good, responsive CSS pages, the <meta> element holds the final piece of the puzzle. As well as having properties for the page description and author, it includes properties for the device viewport - that is, the size of the device browser window. HTML5 has added this property to optimize the look of HTML pages styled with responsive CSS.

The following meta tag example is how it may be used for optimizing a responsive page:

	<meta name="viewport" content="width=device-width, initial-scale=1" />

The initial scale attribute is also an important component of optimizing responsive content. This will ensure that elements will best fit the width of the viewport.

📄 DOCUMENTATION

MDN docs on the media queries: Using media queries.

Activities

Activity 1

💻 WATCH

Video: CSS Page Layouts 7. Building Responsive Layouts (50m)

Activity 2

📖 READ

In HTML and CSS: Design and Build Website Chapter 18: Process & Design, pp. 452-474 (1hr)

Activity 3

💻 WATCH

Video: CSS Essential Training 4. Responsive and Mobile (30m) Conclusion (32s)

Lesson Task

Brief

There are practice questions in the master branch of this repo.

Attempt the answers before checking them against the answers in the answers branch of the repo.