CSS Media Queries

Dr. Greg Bernstein

Updated April 14th, 2019

Media Queries

Readings

  1. MDN Media Queries Overview
  2. MDN Using media queries
  3. Bootstrap 4 use of media queries

What are they 1?

From MDN:

Media queries let you adapt your site or app depending on the presence or value of various device characteristics and parameters.

What are they 2?

From MDN:

They are a key component of responsive design. For example, a media query can shrink the font size on small devices, increase the padding between paragraphs when a page is viewed in portrait mode, or bump up the size of buttons on touchscreens.

In HTML

From HTML media queries

  • In the <link> element's media attribute, they define the media to which a linked resource (typically CSS) should be applied.
  • In the <source> element's media attribute, they define the media to which that source should be applied. (This is only valid inside elements.)
  • In the <style> element's media attribute, they define the media to which the style should be applied.

In JavaScript

From JavaScript media queries

  • Window.matchMedia() method to test the window against a media query.
  • There are some new interfaces that may allow you to listen for media change events. However, at this time these are not well supported.

Direct CSS Usage

Use to conditionally apply styles with the CSS @media and @import at-rules:

@media [Logical expression] {
  /* Set of CSS rules to apply if the logical expression it True */


}

Media Types, Features, and Operators

  • Media types: all, print, screen, and speech
  • Features: width, height, aspect-ratio, orientation, resolution, and others.
  • Operators: and, not, only, or via a comma ","

Usage: making changes due to screen width

From Bootstrap:

/* Extra small devices (portrait phones, less than 576px)
   No media query for `xs` since this is the default in Bootstrap */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) { ... }

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { ... }

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { ... }

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { ... }

Example: Pointless Color Changes

/* Extra small devices (portrait phones, less than 576px) */
#Ex1 {background-color: red;}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {#Ex1 {background-color: blue;} }

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {#Ex1 {background-color: yellow;} }

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {#Ex1 {background-color: green;} }

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {#Ex1 {background-color: white;}  }

More Common/Practical Use

  • Show, hide, change navigation bar/menu based on width
  • Change number of columns in a layout; Show/Hide sidebars
  • One Design approach: start with most restrictive (smallest) screen figure out what you can/want to show then enhance for larger screen sizes.