RESPONSIVE WEB DESIGN

COMP 126: Practical Web Design & Development for Everyone

a responsive design requires:

meta information for the browser (viewport meta tag)
a fluid layout that automatically resizes/realigns to be usable and look good on any (reasonable) viewport (browser/device) size or orientation
images, video, media, & styling that automatically scale to be usable and look good on any (reasonable) viewport size or orientation
a way to change the things that still look weird at some sizes & orientations regardless of your fluid/scalable styling: in this case, that means media queries

<meta name="viewport" 
      content="width=device-width,initial-scale=1.0"/>

Add this to your <head> (not <header>) element:

Translation:

"Please check the width of the viewport before rendering this page in the browser and scale/display the page's contents according to that width."

a media query is a CSS feature that can be used to instruct a website or app to adapt features of its design for different screens and media types

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

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/
screen is the condition we'll be using most often--specifically, screen size

Some typical breakpoints are

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

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

media/device type

operator

condition

breakpoint