Using a Media Type or @media is used extensively to make your web page responsive.
Cascading Style Sheets
By the end of this page you will be able to:
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.
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
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 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?)
- and much more
(CSS3 @media Rule, n.d.) 
- 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
<ref> tags exist, but no
<references/> tag was found