<link rel="stylesheet" type="text/css" href="print.css" media="print">
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 |
print |
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 |
thank you Mr.Chris Coyier
Nice one Chris, but I m finding for the css code for setting the background image based on the screen resolution as for screens smaller than 1800 width, I have to load the full background of 1800px width. If trick works I would load the smaller image in small resolution screen. Thanks
Try this code if you haven’t found out one yet. I grabbed an image off Google that is 1920px × 1080px it will make it the size of the page no matter what.
http://jsfiddle.net/WkJjK/
Good one.. :)
Sorry, I’ve recently started creating themes for wordpress. I wanna use @media handheld in wordpress.. How do I do this? According to me it has only one stylesheet.
WordPress can also have several stylesheets… (as a matter of fact, many plugins add stylesheets to your “head” section anyhow to keep their widget styles consistent). Just go into the “header.php” file of your theme (maybe via the editor built into wp) and look at the header yourself.
Will probably contain the following code somewhere:
<link rel="stylesheet" href="” type=”text/css” media=”screen” />
Then just add the following code:
and save “styleMedia.css” or whatever you want to name it to the root directory of your theme (or in a seperate css folder if you like, but then don’t forget to add the same foldername to the “path” of your css file.)
Hope that is of any help…
You should also include a list of the media features for use in media queries. It would be most helpful.
http://www.w3.org/TR/css3-mediaqueries/#media1
Thanks for shaing this, helped me a lot
Thank you for another great snippet Chris
Can anybody help me why use
media? i have badly confusion for mobile & web css
“aural” is only in HTML 4.01 and “embossed” is only in CSS 2.1
This is outdated.