VirtualMV/CSS/Formatting/Devices/Content

From WikiEducator
< VirtualMV‎ | CSS‎ | Formatting‎ | Devices
Jump to: navigation, search

Introduction

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

VmvIcon Objective.png

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


Cite error: <ref> tags exist, but no <references/> tag was found