CSS – Media Queries

I came across media queries, a CSS functionality that helps to create a more responsive site, while going through General Assembly’s Dash Tutorial.  It allows you to specify attributes based on the width of the screen.  You construct a media query as follows:

 @media (max-width: 500px) {
        body {
          background: red;
          }
        }

Essentially  once the statement in the parenthesis becomes true  the element(s) inside the { } will evaluate.  With the example above the body’s background will become red when the width is less then 500 px (i.e. on a phone) but more practically you would use the media query to dictate changes to help your site translate better on smaller displays (like smaller font sizes, and less margin pixels).  Here’s the media query in action on a navigation bar.

Screen Shot 2013-10-19 at 11.58.38 PM

Screen Shot 2013-10-19 at 11.59.37 PM

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>