Lesson 3 CSS3 Media Queries

First what are Media Queries, A Media Query is an instruction for the css it tells it to make the sites widths for everything change depending on the device it is being viewed on to make it easier to use sites on mobile devices.

Objective

This lesson will consist of how to apply a Media Query, Media Properties, and Keywords

Applying a Media Query

A media Query is able to be read in html in two ways

With a Link Tag(External CSS)


<link href="narrow.css" rel="stylesheet" type="text/css" media="only screen and (max-width: 920px)" />

You are also able to input a media query into your pages by using internal css instead of external css like this

Internal


@media screen and (min-width: 321px) and (-webkit-min-device-pixel-ratio: 2) { p {font-size:1em;}  }

Media Properties

  • min-width
  • max-width
  • min-device-width
  • max-device-width
  • min-height
  • max-height
  • min-device-height
  • max-device-height

Window Related

The window related properties are for the user's computer's browsers' windows. When the user adjust their window by stretching the size of the browser, the value decides whether or not to activate its CSS.

  • min-width
  • max-width
  • min-height
  • max-height

Device Related

The device related property is used for styles that need to be applied to browsers that are being viewed in a mobile device like a cellphone or tablet. Because the viewer can not adjust the window's size, device related properties are set with one static number.

  • min-device-width
  • max-device-width
  • min-device-height
  • max-device-height

Keywords

The keywords are used in unison with the properties. Besides being repeated, the keywords can also be combined.

not - user agents that only support media types (as described in HTML4) will not recognize the ‘not’ keyword and the associated style sheet is therefore not applied.

only - can also be used to hide style sheets from older user agents. User agents must process media queries starting with 'only' as if the ‘only’ keyword was not present. It is ignored in older browsers, and browsers not savvy to CSS3.

and - used to join expressions together.

or - used to give an option. You could say that the screen has to be a min-width of 800px or a max-width of 900.

Browser Support