[CSS] Media Query

Now your website can be viewed in many devices: laptops, netbooks, tablets, and even phones. Wouldn’t it be nice if you can provide custom styles for different devices without modifying your documents or existing styles?

 

1. Media Queries

You can specify style rules for specified media. The rules to select the specific media is called “media queries“.

You can specify the media rules:

  • in the “media” attribute in the <link> tag
<link rel="Stylesheet" href="styleWide.css"
media="screen and (min-width:801px)" />
<link rel="Stylesheet" href="styleNarrow.css"
media="screen and (max-width:800px)" />
  • or through the “@media” in the style sheet.
@media screen and (min-width:801px) {
  body { background-color: Black; color:White; }
}
@media screen and (max-width:800px) {
  body { background-color: Gray; color:Red; }
}

 

2. Query Syntax

The media query syntax is like this:

  • (type) and (rule1) and (rule2) …
@media screen and (min-width:801px) {
}

 

  • not” operator

You can negate the whole query by specifying the “not” operator at the beginning of the query. You cannot use the “not” operator in the middle of the query.  For example, (not x and y) = not (x and y) ≠ (not x) and y

@media not print and (max-width:800px) {
}

 

Notice that there is no ‘or’ operator. If you want to apply the same styles to multiple queries, you can specify them separated by a comma ‘,’.

@media screen and (min-width:601px) {
  /* from 601 to 1000 */
  body { background-color: Black; color:White; }
}
@media screen and (max-width:600px), screen and (min-width:1001px) {
  /* to 600 or from 1001 */
  body { background-color: Gray; color:Red; }
}

 

3. Media Types

You can query the following media types.

  • all : all media type devices
  • aural : speech and sound synthesizers
  • braille: braille tactile feedback devices
  • embossed : paged braille printers
  • handheld : small or handheld devices
  • print : printers
  • projection : projected presentations, like slides
  • screen : screens
  • tty : media using a fixed-pitch character grid, like teletypes and terminals
  • tv : television-type devices

 

4. Media Features – Width and Height

  • width, min-width, max-width 
  • height, min-height, max-height 
  • device-width, min-device-width, max-device-width 
  • device-height, min-device-height, max-device-height
@media screen and (min-device-width:400px) { }

 

5. Media Features – Ratio

  • aspect-ratio, min-aspect-ratio, max-aspect-ratio 
  • device-aspect-ratio, min-device-aspect-ratio, max-device-aspect-ratio
@media screen and (min-aspect-ratio:2/1) { }

 

6. Media Features – Colors

  • color, min-color, max-color : number of bits
  • color-index, min-color-index, max-color-index : total number of colors
@media screen and (min-color:4) { }
@media screen and (min-color-index:256) { }

 

7. Media Features – Resolution

  • resolution, min-resolution, max-resolution : dpi (dot-per-inch), dpcm (dot-per-centimeter)
@media screen and (min-resolution:96dpi) { }

 

8. Orientation

  • portrait, landscape
@media screen and (landscape) { }
@media screen and (portrait) { }

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 )

Google+ photo

You are commenting using your Google+ 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 )

Connecting to %s