Responsive Web Design: Media Types/Media Queries/Fluid Images

HTML Media Types Responsive Web Design: Media Types/Media Queries/Fluid Images Mr Kruyer s list of HTML Media Types to deliver CSS to different devices. Important note: Only the first three are well supported. Examples of HTML <link> method: URL to CSS file <link rel = "stylesheet" href = "path/all-devices.css" media = "all"> This is equivalent to: <link rel = "stylesheet" href = "path/all-devices.css"> <link rel = "stylesheet" href = "path/screen.css" media = "screen"> All types of devices Stylesheet used for: Colour computer monitors <link rel = "stylesheet" href = "path/print.css" media = "print"> Printers <link rel = "stylesheet" href = "path/aural.css" media = "aural"> Webpage readers <link rel = "stylesheet" href = "path/braille-tactile.css" media = "braille"> Webpage to tactile Braille devices <link rel = "stylesheet" href = "path/braille-printer.css" media = "embossed"> Webpage to Braille printers <link rel = "stylesheet" href = "path/handheld.css" media = "handheld"> Handheld devices <link rel = "stylesheet" href = "path/projector.css" media = "projection"> Projectors <link rel = "stylesheet" href = " path/teletype.css" media = "tty"> Teletypes and terminals <link rel = "stylesheet" href = " path/tv.css" media = "tv"> TV devices <link rel = "stylesheet" href = " path/screen.css" media = "screen, tv, projection"> Devices listed using a comma as separator. C:\Users\Kruyer\Documents\TAFE\websiteDevelopment\HTML5\responsive-web-design.docx Page 1

HTML Media Types HTML Media Types Examples of HTML <link> method that includes a media query Stylesheet used for: <link rel = "stylesheet" href = "path/devices.css" media = "(min-width: 10em)"> Devices with minimum width of 10em <link rel = "stylesheet" href = "path/devices.css" media = "(max-width: 90em)"> Devices with maximum width of 90em Example of HTML <link> method for older browsers Stylesheet used for: <!--[if lt IE 9]> <link rel = "stylesheet" href = "path/devices.css"> <![endif]--> Older browsers (in this case IE 9 or older) that do not understand media queries. These browsers get fixed-width layouts. C:\Users\Kruyer\Documents\TAFE\websiteDevelopment\HTML5\responsive-web-design.docx Page 2

CSS 2/3 Media Query rules Mr Kruyer s list of CSS Media Queries for maximum speed to different devices. Examples of CSS 3 @media method Media types Media expressions/(features) Assumed to be all unless specified (color) (monochrome) all (min-width: 20em) screen (max-width: 30em) print (orientation: portrait) (orientation: landscape) (device-width: 480px) Notes: 1/ Older browsers recognise media types so do not use these if you do not want the query to be applied. 2/ Hide styles from non CSS 3 browsers using keyword: any @media all and (color) This is equivalent to: @media (color) @media screen and (color) and, not only Only understood by devices with modern browsers. Older browsers ignore these. They refer to viewport size, colour capabilities orientation etc. These four keywords are used to join multiple expressions. Note:, = or CSS code applied to: All types of devices that support colour. Your CSS rules would only be applied to modern browsers. Only colour computer monitors. Your CSS rules would be applied to both modern and older browsers. C:\Users\Kruyer\Documents\TAFE\websiteDevelopment\HTML5\responsive-web-design.docx Page 3

@media screen and (color: 256) @media (min-width: 20em) and (max-width: 30em) @media (min-width: 20em), (orientation: landscape) @media not (orientation: portrait) @media only screen and (min-width: 20em) /* Place your CSS 3 rules here */ @media any and (max-width: 320px) and (orientation: portrait) /* Place your CSS 3 rules here */ Only supports computer monitors with 256 colours. CSS rules would be applied to both modern and older browsers. All types of devices that have a minimum width of 20em and maximum width of 30em. Applied to modern browsers only. All types of devices that have a minimum width of 20em or screen in landscape mode. Applied to modern browsers only. All types of devices that are not in portrait mode. Applied to modern browsers only. Only computer monitors that have min. width of 20em (Useful when blocking older browsers that don t support media features.) Any device that has max. width of 320px and screen in portrait mode. (Useful when blocking older browsers that don t support media features.) @media (min-width: 20em) and (max-width: 30em) @media (min-width: 30.01em) and (max-width: 40em) @media (min-width: 40.01em) and (max-width: 50em) @media (min-width: 50.01em) and (max-width: 60em) @media (min-width: 60.01em) All types of devices delivering five different CSS rules depending on the minimum width and maximum width of the device. C:\Users\Kruyer\Documents\TAFE\websiteDevelopment\HTML5\responsive-web-design.docx Page 4

CSS 2: Images @media (min-width: 700px) body font-size: 120%; @media (min-width: 800px) body font-size: 140%; @media (min-width: 900px) body font-size: 160%; @media (min-width: 1000px) body font-size: 180%; @media (min-width: 1100px) body font-size: 200%; All types of devices delivering five overlapping (increasing) font sizes depending on the (increasing) width of the device. Mr Kruyer s table for delivering fluid foreground/background images using CSS CSS code for fluid inline or background images /* For fluid inline image use the following four properties/values: */ img max-width: 100%; vertical-align: middle; border: 0; image-rendering: optimizequality; CSS lines explained: 1. Image can be reduced but never larger than original size. 2. Image centred within the line of surrounding text. 3. Removes blue image border of older browsers. 4. Improves image quality for Firefox. (Use optimizespeed lower quality but faster loading.) C:\Users\Kruyer\Documents\TAFE\websiteDevelopment\HTML5\responsive-web-design.docx Page 5

CSS 3: Backgrounds /* Background cropped on left and right with height constant: */.responsive-crop-bg-image width: 100%; height: 300px; background-image: url(../images/pic.jpg); background-size: cover; background-position: center center; background-repeat: no-repeat; contain scales image keeping aspect ratio to fit inside area. cover scales image keeping aspect ratio to cover area. Clipping can occur. Clipping does not happen in the second CSS background image rule as the boxheight (i.e. bottom padding) is set to maintain the background image aspect ratio. /* Background scaled maintaining aspect ratio: */.responsive-scalable-bg-image width: 100%; padding-bottom: 50%; background-image: url(../images/pic.jpg); background-size: cover; background-position: center center; background-repeat: no-repeat; Notes: 1/ Tiling can occur if the image height or width is fixed unless background-repeat: no-repeat; is included. 2/ Aspect ratio = 50% For my pic.jpg image: Height = 300px Width = 600px 300/600 = 50%.container max-width: 600px; margin: 0 auto; border: 1px solid red; C:\Users\Kruyer\Documents\TAFE\websiteDevelopment\HTML5\responsive-web-design.docx Page 6

The HTML code for the above CSS 3 code: Screen dumps: <div class = "container"> <h1>fluid background images</h1> <p>the container's maximum width is set to 600 pixels and has a 1 pixel red border.</p> <div class = "responsive-crop-bg-image"></div> <p>this top background image will have the left and right sides cropped when the webpage is resized down. When scaled up the image</p> <div class = "responsive-scalable-bg-image"></div> <p>this second background image will scale down with the aspect ratio maintained when the webpage is resized down.</p> </div> Before scaling down: webpage width > 600px After scaling down: webpage width < 600px C:\Users\Kruyer\Documents\TAFE\websiteDevelopment\HTML5\responsive-web-design.docx Page 7