Blog

media queries

Responsive Design 103: CSS Media Queries & Google Chrome Tools

Now that you’ve got a good handle on responsive web design and Twitter’s Bootstrap framework, it’s time to dive into the final two most important tools you’ll need for creating responsive websites: CSS media queries and Google Chrome’s Developer Tools.

CSS @media queries

PURPOSE: Manually telling the browser to display different things on different sized screens.

HOW-TO: Media queries is the closest you’ll come to real “programming” while coding in CSS. Most of CSS is just about telling the browser how to display certain elements. @media queries, on the other hand, actually tell the browser to check on something (in this case, the size of the browser window or the type of device being used), and then display different things depending on the results of that check. It’s almost like an “if, then” statement, for CSS. For example:

<style>

@media screen and (min-width: 480px) {
#leftsidebar {width: 200px; float: left;}
#main {margin-left: 216px;}
}

#main {margin-left: 4px;}

#leftsidebar {
float: none;
width: auto;
}

</style>

is essentially equivalent to telling the browser:

@media = O browser, please check the screen size for me.

screen = if this website is being displayed upon a screen,

and (min-width: 480px) = and the window is at least 480 pixels wide,

{ … } = then, dear browser, please execute the code contained within these curly braces (in this case, make the #leftsidebar float on the left, with a width of 200px, and allow the #main section to have a margin-left of 216 pixels). Otherwise, if this is not being displayed upon a screen, or if the browser window is smaller than 480px, then please use the default settings for #leftsidebar and #main, which are defined somewhere outside of these curly braces.

  1. Click here to read more about media queries.
  2. Click here for a simple example of media queries at work. Resize the browser window, and you’ll see that the background color is light blue by default, but turns to light green whenever the window is wider than 480 pixels.
  3. Using the above resource, see if you can add a few lines of CSS code to make the <h1> header change sizes depending on the size of the browser window. If you can’t figure it out, check out the code snippet at the bottom of this page. Added code is in bold.
  4. Here is another example from the same series, using media queries to create a responsive web page. Notice that in this case, media queries are used to perform a similar function to Twitter Bootstrap. Indeed, much of Bootstrap’s code library uses media queries for its responsive design features.
  5. Lastly, you might want to check out what this developers.google.com tutorial has to say about media queries; note that you can even tell the browser to use entirely different stylesheets depending on the results of the @media queries!
  6. If you want to dig deeper into media queries, consider coming in to our Miami location for our Front End Web Developer courses!

RESOURCES: developers.google.com tutorial | w3schools tutorials

Google Chrome Developer Tools

PURPOSE: Testing your website on various devices, without having to buy all the devices.

HOW-TO: After learning @media queries and Twitter’s Bootstrap, learning how to use Google Chrome’s Developer Tools to test your website on various devices is a walk in the park. Before we start, make sure you’re looking at this page in a Google Chrome window (if you don’t have Chrome, download it here and then open this page again in the Chrome browser).

  1. Right-click basically anywhere on the page (even on these words, if you’d like), and select “inspect” from the right-click menu. This should open up a new frame on the page, that contains all the front-end code for whatever website you’re looking at right now (in this case, this blog post).
  2. In the top-left corner of that frame, you’ll see a couple of little icons. One of them looks like a smartphone/tablet icon; if you hover over it, you’ll see the words “Toggle device toolbar.” Click on that icon, and Chrome will show you what your website will look like on various devices.
  3. On the top of the screen, you may see the word “responsive,” or you may see the name of a common smartphone/tablet/device. If it says “responsive,” you can change the size of the browser window to see how your website will look in various window sizes. If it says the name of a device (like “iPhone 6” for example), then the display is showing you what your website will look like on those devices. You can switch between devices by clicking on the little arrow next to the device name (or the word “responsive”). To see a longer list of devices and advanced options, click the “edit” option at the bottom of the device drop-down menu.

RESOURCES: Download Google Chrome | Learn more about Developer Tools

 

Code Snippet (for media queries challenge above)

<style>
body {
background-color: lightblue;
}

 h1 {
  font-size: 12px;
 }

@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
   h1 {
     font-size: 24px;
   }
}

</style>