CSS3 Media Queries

download CSS3 Media Queries

of 91

  • date post

    19-Aug-2014
  • Category

    Education

  • view

    63.704
  • download

    7

Embed Size (px)

description

Media queries are one of the most exciting aspects about CSS today. They will allow us to change our layouts to suit the exact need of different devices - without changing the content. This presentation explains what Media queries are, how to use them, how to target the iPhone and how to create flexible layouts.

Transcript of CSS3 Media Queries

  • CSS3 MEDIA QUERIES
  • Why should you care about media queries?
  • Media queries are one of the most exciting aspects about CSS today.
  • Media queries will allow us to change our layouts to suit the exact need of different devices - without changing the content.
  • For example, we will be able to move away from one-size-fits- all solutions such as liquid, elastic and fixed width layouts.
  • Lets take a standard 3 column 1000px wide layout
  • Imagine if it could become a 2 column 800px wide if the user has a narrower browser window
  • or a single column 400px wide layout if the user has a mobile device or a very narrow browser window
  • And all done with CSS alone - no JavaScript
  • This is just one quick example of how media queries can help us deliver CSS in new and exciting ways
  • But before we talk about media queries, we need to do a quick overview of media types.
  • So, what are media types?
  • CSS can be used to specify how a document is presented in different media.
  • There are ten media types defined in CSS 2.1
  • all suitable for all devices aural for speech synthesizers braille for Braille tactile feedback devices embossed for paged Braille printers handheld for handheld devices print for print material projection for projected presentations screen for color computer screens tty for teletypes and terminals tv for television type devices
  • There are five methods that can be used to specify media for style sheets.
  • Method 1: within HTML
  • You can use a element in the head of your HTML document to specify the target media of an external style sheet.
  • Method 2: within XML
  • You can use in the head of your XML document to specify the target media of an external style sheet.
  • Method 3: @import within HTML
  • You can use @import in the head if your HTML document to specify the target media of an external style sheet.
  • Warning: @import should be avoided as it can cause issues in some versions of Internet Explorer. http://www.stevesouders.com/blog/2009/04/09/dont-use-import/
  • Method 4: @import within CSS
  • You can specify the target medium within a CSS file using @import @import url("a.css") screen;
  • Media-types within @import rules are not supported by IE5, IE6 or IE7. The rule is ignored.
  • Method 5: @media within CSS
  • You can specify the target medium within a CSS file using @media @media screen { body { color: blue; } }
  • Why should we care about these five methods?
  • Because you can use these five methods to define not only media types, but media queries
  • Lets talk media queries
  • Media queries are a CSS3 extension to media types that gives us more control over rendering across different devices.
  • A media query is a logical expression that is either true or false.
  • The CSS associated with the media query expression is only applied to the device if the expression is true.
  • Media query syntax
  • A media query generally consists of a media type and zero or more expressions. Media type Expression
  • An expression consists of zero or more keywords and a media feature. Keyword Media feature
  • Media features are placed within brackets. Media feature
  • A media feature can be used without a media type or keyword. The media type is assumed to be all. Media feature
  • Most media features accept min- or max- prefixes.
  • Media features can often be used without a value.
  • Media features only accept single values: one keyword, one number, or a number with a unit identifier. Except aspect-ratio and device-aspect-ration which require two numbers (orientation: portrait) (min-width: 20em) (min-color: 2) (device-aspect-ratio: 16/9)
  • The full media feature list
  • Feature Value min/max aspect-ratio ratio (integer/integer) yes color integer yes color-index integer yes device-aspect-ratio ratio (integer/integer) yes device-height length yes device-width length yes grid integer no height length yes monochrome integer yes orientation keyword (portrait/landscape) no resolution resolution (dpi) yes scan keyword (progressive/interlace) no width length yes
  • A simple example
  • The CSS file in this example should be applied to screen devices that are capable of representing color.
  • This same media enquiry could be used with @import via HTML.
  • It could be used with @import via CSS. @import url("a.css") screen and (color);
  • Or using @media via CSS. @media screen and (color) { body { color: blue; } }
  • Multiple expressions
  • You can use multiple expressions in a media query if you join them with the and keyword.
  • The CSS file in this example will be applied by hand-held devices, but only if the viewport width is at > 20em and < 40em.
  • Comma separated
  • You can also use multiple, comma-separated media queries. The comma acts like an or keyword.
  • The CSS file in this example will be applied to screen with color or handheld devices with color.
  • Using the not keyword
  • You can use the not keyword in a media query if you want your CSS to be ignored by a specific device.
  • The CSS file in this example will be applied to all devices except those with color screens.
  • Using the only expression
  • The CSS file in this example will be applied only to all devices with color screens.
  • Sup