Skip to content

More on Media Queries

May 10, 2013

Building on top of media types the W3C added media queries. A simple media query looks like the following:

1
2
3
@media screen and (max-width: 1200px) {
  css here
}

It begins with the media type (in this case screen) and is followed by the query as a feature: value pair. Here we’re targeting browsers with a max-width of 1200px

The type and the query are joined by the “and” operator. We’ll see in a bit that we can chain this operator to target very specific devices and characteristics

Above we started the media query with @media, but there are actually 3 ways to include media queries.

  • @media which is added in your css file — @media screen and (max-width: 1200px) {css here}
  • as part of html link element — < link rel=”stylesheet” href=”my-style.css” media=”screen and (max-width: 1200px)” / >
  • @import in .css — @import url(“my-style.css”) screen and (max-width: 1200px)

The @media method is probably the most common and it has the advantage of keeping all your css in a single css file. It’s likely what you’ll use most often in practice.

Advertisements

From → Uncategorized

Leave a Comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: