VirtualMV/CSS/Formatting/Devices

Introduction

Using a Media Type or @media is used extensively to make your web page responsive.

• Add the code to change the output depending on device
• Use @media to create responsive div tags

Different stylesheets for different media

A really clever technique that you can use, is to have a style sheet that is device specific. For example, you can put a menu in a div tag and show it when displayed on the screen but hide it when printed.

Media types

The <LINK> tag also takes an optional MEDIA attribute, which specifies the medium or media to which the style sheet should be applied. Possible values are

• all, for all output devices.
• screen (the default value), for presentation on non-paged computer screens;
• print, for output to a printer;
• A large number have been depricated including
• projection, aural, braille, tty, and tv

Examples:

<link rel="stylesheet" type="text/css" href="style.css" media="screen">
title="8-bit Color Style" media="screen, print">
title="24-bit Color Style" media="screen, print">

(WDG,2007)[1]

Checking current settings to create a Responsive page

Using the @media rule in your css allows you to check things like the current width of the web browser and re-adjust the sizes of your divs or apply different formatting to your display.

@media rule

Media queries look at the capability of the device, and can be used to check many things, such as:

• width and height of the viewport
• width and height of the device
• orientation (is the tablet/phone in landscape or portrait mode?)
• resolution
• and much more

Example:

@media screen and (min-width: 480px) {
body { background-color: lightblue;}
}

(CSS3 @media Rule, n.d.) [2]

References

1. WDG (2007) Linking Style Sheets to HTML. Retrieved March 31, 2008 from http://htmlhelp.com/reference/css/style-html.html