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?

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
}

126-Media Queries

By tkjn

126-Media Queries

  • 778