One of the key features we are going to be using in Windows 8 it is Media Types.
Media Types allows you to set different types of screens of devices. It is really useful to create full accessibility to your site, so for example, if the person which is going to read the site can’t see properly, we can use the tag braille next to @media, in that way, if this person has a special device capable of translating sites into braille, it will work.
Other useful case will be having to deal with mobile devices or especial screens, then we can use handheld or screen and (min-width:480px)
Some other properties can be used for different media types. For example, the "font-size" property can be used for both screen and print media, but perhaps with different values. A document usually needs a larger font-size on a screen than on paper, and sans-serif fonts are easier to read on the screen, while serif fonts are easier to read on paper.
Media Types
| Media Type | Description |
| all | Used for all media type devices |
| aural | Used for speech and sound synthesizers |
| braille | Used for braille tactile feedback devices |
| embossed | Used for paged braille printers |
| handheld | Used for small or handheld devices |
| Used for printers | |
| projection | Used for projected presentations, like slides |
| screen | Used for computer screens |
| tty | Used for media using a fixed-pitch character grid, like teletypes and terminals |
| tv | Used for television-type devices |
Example:
This example displays screen,print and custom screens for a mobile device:
<html>
<head>
<style>
@media screen
{
p.test {font-family:verdana,sans-serif;font-size:14px;}
}
@media print
{
p.test {font-family:times,serif;font-size:10px;}
}
@media screen,print
{
p.test {font-weight:bold;}
}
@media screen and (min-width:200px) and (max-width:480px)
{
#navar{
float: none;
width: 200px;
}
}
@media screen and (min-width:480px)
{
#navar{
float: left
width: 500px;
}
}
</style>
</head>
<body>
....
</body>
</html>
No comments:
Post a Comment