CSS MEDIA QUERIES

COMP 126: Practical Web Design &

Development for Everyone

MEDIA QUERY:

a CSS feature that allows a website or app to adapt its design to different screens and media types

syntax

@media media type and (media feature/condition: breakpoint) {
  // CSS rules that kick in when the feature is present or the condition is met
}

MEDIA (Device) types

all: check for and apply styles to all media types

print: check for and apply styles to be used when printing

screen: check for and apply styles based on the size of the screen

speech: check for and apply in the case of screen readers that “read” the page out loud

media features: What should the browser check for?

conditions such as screen size: min-width (for mobile first design, which is recommended in most cases) or max-width (if your default styles are for desktop; this is not recommended
features & more: https://css-tricks.com/a-complete-guide-to-css-media-queries/

breakpoints: where should the change happen?

Some typical breakpoints are

320px — 480px: Mobile devices
481px — 768px: iPads, Tablets
769px — 1024px: Small screens, laptops
1025px — 1200px: Desktops, large screens
1201px and more : Extra large screens, TV

...but these are flexible. Some systems/orgs have their own. Or just set breakpoints where your design "breaks"!

SO:

@media screen and (max-width: 480px) {
  .text {
    font-size: 16px;
  }
}

Text

media/device type

operator

condition

breakpoint

1. write your default styles

2. ADD @MEDIA styles after the default styles

1. @MEDIA

@media () {
  // CSS rules that kick in when the 
  // condition is met
}

2.

@media media type and (condition: value) {
  // CSS rules that kick in when the 
  // condition is met
}