VirtualMV/CSS/Formatting/Devices
Introduction
Using a Media Type or @media is used extensively to make your web page responsive.
Cascading Style SheetsBy 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.
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"> <link rel="stylesheet" type="text/css" href="color8.css" title="8-bit Color Style" media="screen, print"> <link rel="Alternate StyleSheet" type="text/css" href="color24.css" 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]
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
References
- ↑ WDG (2007) Linking Style Sheets to HTML. Retrieved March 31, 2008 from http://htmlhelp.com/reference/css/style-html.html
- ↑ CSS3 @media Rule (n.d.) In w3schools. Retrieved from http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
virtualMV | Superquick wiki guide | Please give me some feedback |
VirtualMV/CSS/Formatting/Devices. (2024). In WikiEducator/VirtualMV wiki. Retrieved October 15, 2024, from http:https://wikieducator.org/VirtualMV/CSS/Formatting/Devices (zotero)
|