VirtualMV/CSS/Formatting/Devices

Introduction

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: 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">
<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)

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.)

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

virtualMV  |  Superquick wiki guide  |  Please give me some feedback

VirtualMV/CSS/Formatting/Devices. (2024). In WikiEducator/VirtualMV wiki. Retrieved November 5, 2024, from http:https://wikieducator.org/VirtualMV/CSS/Formatting/Devices    (zotero)