Responsive Web Design (Media Queries)

In this lecture, we'll explore how to create responsive designs with CSS. Responsive design is a way to optimize your site for different devices, like desktops, tablets, and mobile phones. We'll learn how to use media queries to apply different styles for different devices.

Desired Outcomes

By the end of this lecture, you should be able to:

  • Understand the principles of responsive web design.
  • Use media queries to apply different styles for different devices.

The practice of Responsive Web Design (RWD) is about making your web pages look good on all devices (desktops, tablets, and phones). CSS Media Queries are a key tool for implementing RWD, as they allow you to apply different styles for different devices based on characteristics like screen size, device orientation, and more.

To be able to use media queries, we must first add a viewport meta tag, like in the example below:

<!DOCTYPE html>
<html>
    <head>
        <title>Responsive design</title>
        <!-- This is a meta tag for responsive design -->
        <meta name="viewport" 
              content="width=device-width, initial-scale=1"/>
       
        <style>
            /* Responsive styling */
            @media only screen and (max-width: 600px) {
                body {
                    background-color: lightblue;
                }
            }
        </style>
    </head>
    <body>
    </body>
</html>

Media Queries

Media queries are useful tools in responsive design. They allow you to apply different styles depending on characteristics of the device display like its width, height, resolution, etc.

A media query consists of a media type and at least one expression to limit the scope of CSS styles. When the media query will return true, the corresponding styles will be applied.

You can use media queries to change the layout, hide or show content, resize elements, and more based on the viewport size.

Here is the general syntax for a media query:

@media media-type and (media-feature-rule) {
  /* CSS rules go here */
}
  • media-type: Describes the type of media the CSS rules should apply to. Examples include screen, print, speech, etc. Most of the time, you'll use the screen keyword.
  • media-feature-rule: Describes the specific feature of the media. Examples include width, height, orientation, resolution, etc.

For instance, the following media query applies the CSS rules if the viewport is 600px wide or smaller:

@media screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

Mobile First vs Desktop First

The terms "Mobile First" and "Desktop First" refer to the strategy you use when setting your media queries.

Mobile First

In the Mobile First approach, you start by styling the mobile version of the site, and then use media queries to add styles for larger screens. The media queries in this case will typically use min-width.

Example:

body {
  background-color: lightblue; /* mobile styles */
}

@media screen and (min-width: 600px) {
  body {
    background-color: lightgreen; /* desktop styles */
  }
}

In this example we first set the background-color of the body element to lightblue and then when the viewports width is larger than 600px we change the background-color to lightgreen.

Desktop First

In the Desktop First approach, you start by styling the desktop version of the site, and then use media queries to add styles for smaller screens. The media queries in this case will typically use max-width.

Example:

body {
  background-color: lightgreen; /* desktop styles */
}

@media screen and (max-width: 599px) {
  body {
    background-color: lightblue; /* mobile styles */
  }
}

In this example we first set the background-color of the body element to lightgreen and then when the viewports width is smaller than 599px we change the background-color to lightblue.

Both strategies have their advantages and can be effective. It depends on the specific needs of your project. However, the Mobile First approach is generally considered a best practice, as mobile web usage continues to rise and the approach lends itself better to performance optimization.

Combining Media Queries

You can combine Media Query limitations with the keyword and as you can see in the examples below.

@media screen and (max-width: 900px) and (max-height: 500px) {
    h1 {
        display: none;
    }
}

This Media Query will be applied when the viewport width is smaller than 900px and the viewport height is smaller than 500px.

Device Orientation

You can also specify Media Queries to target specific device orientations with the keyword orientation. The applicable values are landscape and portrait.

@media (orientation: landscape) {
    body {
      background-color: powderblue;
    }
}
 
@media (orientation: portrait) {
    body {
        background-color: greenyellow;
    }
}

In this example, the body background-color will be powderblue when the device is in landscape orientation, and greenyellow when the device is in portrait orientation.

Creating Fluid Layouts

A fluid layout is one that uses relative units instead of fixed units, allowing the layout to resize with the viewport (the visible part of the web page). This adaptability makes fluid layouts an integral part of responsive web design.

Using Relative Units

The key to creating a fluid layout is using relative units such as percentages (%) instead of fixed units like pixels (px). We’ve already mentioned relative units in the previous lessons, but let’s go through it one more time.

  • Percentages (%): This unit is relative to the parent element. For example, if you have a container with a width of 1000px, and a child element has a width of 50%, the child element will be 500px wide.
  • Viewport Width (vw): 1vw is equal to 1% of the viewport width. So, an element with a width of 100vw will always fill the entire width of the screen, regardless of the screen size.
  • Viewport Height (vh): 1vh is equal to 1% of the viewport height. So, an element with a height of 100vh will always fill the entire height of the screen, regardless of the screen size.
  • em: This unit is relative to the font size of the element. If the font size of the document is 16px, 1em is equal to 16px. If you change the font size of an element to 20px, 1em within that element is equal to 20px.
  • rem: This unit is relative to the font size of the root element (typically the <html> element). If the font size of the document is 16px, 1rem is equal to 16px, regardless of the font size of any parent elements.

Here's an example of a fluid layout using percentages:

HTML

<div class="container">
  <div class="column">Column 1</div>
  <div class="column">Column 2</div>
  <div class="column">Column 3</div>
</div>

CSS

.container {
  width: 80%; /* 80% of the parent's width */
  margin: 0 auto; /* center the container */
  overflow: hidden; /* clears the floats of child elements */
}

.column {
  width: 33.33%; /* roughly one third of the container's width */
  float: left; /* align columns side by side */
}

In this example, the .container div will always take up 80% of the width of its parent element, and each .column div will always take up roughly one third of the .container div's width.

However, remember that fluid layouts alone may not be enough to create a fully responsive design, and they should be used in combination with CSS media queries to adjust the layout at different viewport sizes.