VirtualMV/CSS/Formatting/Devices/Content

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

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 &lt;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 Examples:
 * 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

(WDG,2007)

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:

(CSS3 @media Rule, n.d.)

Resources

 * Media Queries In Responsive Web Design. Retrieved from http://www.os-templates.com/journal/media-queries-in-responsive-web-design
 * Rodreigues, J. (2014) Understanding Media Queries in HTML Email. Retrieved from https://litmus.com/blog/understanding-media-queries-in-html-email