Penn Week 11 – Media Queries & Javascript Introduction

Responsive Design Introduction

Unlike print, digital design is experienced on a variety of formats (for example, phones, tablets, a variable browser window), so as designer’s we need to create a system that works on many different formats. As developers, we need to keep this in mind for the same reasons.

If you’d like to follow along, create an index.html and main.css file, or copy and paste the following:
<!DOCTYPE html>
<html>
<head>
  <title>Media Queries and JS</title>
  <link rel="stylesheet" type="text/css" href="assets/main.css">
</head>
<body>
  <div class="container">
    <div class="item">
      Hello!
    </div>
  </div>
</body>
</html>


Media Queries
Media queries are a CSS technique that allow you to target specific capabilities of a device. It uses the @media rule to define how the CSS will change only if that condition is true.

/* If the browser window is smaller than 500px, the background color will change to lightblue: */

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

Media queries can be used to target vertical rules as well:
/* If the browser window is shorter than 650px, the background will turn orange */


@media (max-height: 650px) {
  body {
    background-color: orange;
  }

Specifying a max-width or max-height in a media query is often used when you write CSS for your website viewed on desktop, but if you want it to look different at a smaller, or larger, breakpoint. It’s also helpful in fine-tuning some of your design elements on a variety of sizes.

Mobile First Media Queries

Instead of defining your media queries using max-width you can also take a mobile first approach where you define your media queries using min-width

/* The body's background is set to blue by default, but when the browser's width is at least 1000 pixels wide, the background is set to red. */

body {
  background-color: blue;
}