Media Queries (pt 1)

There’s many frameworks for responsive design. I’ve used two of the most popular, Bootstrap, and Materialize. However, I wanted to see what was working under the hood that allows the breakpoints in responsive design so I wanted to dive into media queries.

Responsive design uses HTML and CSS to to make our web pages look good on all devices. Whether it’s a computer screen, tablet, or a phone.

With responsive design we can try to create an experience that is good for all users, not just one using a particular device.

A few notes to be familiar with before dive into media queries.

Viewport: this is the user’s visible area of a web page.

HTML Boiler plate:

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

  • width=device-width — sets the width of the page to follow the screen-width of the device
  • initial-scale=1.0 — sets the initial zoom level when the page is first loaded by the browser.

** Always Design for Mobile First **

  • Instead of changing styles when the width gets smaller, we should design for the mobile screen first and scale out as the screen gets larger.
  • For instance, design the website first for mobile device, then work towards the tablet, and finally design for the monitor size device.

Breakpoints

These are the points you decide where you want the style to change on your website.

There is no set or absolute standards at which point to adjust your styles, however, below are same numbers that seem to be typical.

  • Also note, it’s becoming more popular to use an em over a px.
  • @media only screen and (min-width : 320px) { } // Custom, iPhone 4 & 5
  • @media only screen and (min-width : 375px) { } // Custom, iPhone 6 & 7
  • @media only screen and (min-width : 480px) { } // Extra Small Devices, Phones
  • @media only screen and (min-width : 768px) { } // Small Devices, Tablets
  • @media only screen and (min-width : 992px) { } // Medium Devices, Desktops
  • @media only screen and (min-width : 1200px) { } // Large Devices, Wide Screens

In this example the objective will be for us to change the color of each div element based on the size of the browser window (see the youtube video at the top of the page)

BODY

  • Here we’ll set up 6 divs to which we’ll put the rainbow colors each into (R O Y G B V)

CSS

  • First I set each of the divs equal to a height of 100px to give our rainbow some space
Media Queries
  • The media query is written in the format @media only screen and (min-width: ...px) and (max-width: ...px) { your css styles }
  • In our example you can see where any screen size between 1px and 499px will have red as the top element.
  • Once we hit our breakpoint at 500px then red should shift to the 2nd div and the first div will become purple and so on and so forth.

That’s all there is to setting up the media query. Next week we’ll dive in deeper and recreate a responsive grid using media queries. Think of it as our own custom bootstrap.

Check out the repo here http://bit.ly/2qca6QS , or play with this example website here: https://robhitt.com/blog/media-query-pt1/