using media to target different devices

The link tag has media attribute where you can specify the device you want to target. For Example, you want your site to look different for desktop and different for mobile devices and also different for printing. It is very easy to do that, but first I want to show you mostly used options in media attribute in link tag.

Targeting Devices using media attribute in link tag

all Renders to all devices.

handheld Renders to small screen devices having low resolution and limited color support. For Example Cell Phones, PDA(Personal Digital Assistant) and some tablets.

print Uses when printing the webpage.

speech Renders to speech synthesizers.

tv Renders to Television having limited scroll and low colors (may be).

tty render to devices such as teletypes, terminal, and portable devices with limited color capabilities.

You can use them in your link tag like this

<link rel="stylesheet" href="print.css" media="print" />

The above stylesheet print.css is only render when you see the document in Print Preview or when you print the document on the paper.

Targeting Devices using media rule in css stylesheet


Devices can be target using the media rule in css stylesheet. Like this

@media print {





@media screen{






In the above examples, the footer is hidden for color screens (mobile phones, tablet, desktop etc.). But, are visible during printing.

Some of the option I didn’t mention are embossed, braille and projection. Because, I  didn’t find much application for these. and Projection because it is not really supported by any browser 😞.



Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s