قانون media@
این قانون به شما اجازه می دهد تا styleهای مختلفی را برای رسانه ها متفاوت در یک برگه style تعریف کنید.
در مثال زیر، مرورگر روی صفحه نمایش یک فونت Verdana با اندازه 14px را نمایش می دهد. اما اگر صفحه پرینت گرفته شود، آنرا با فونت Times و با اندازه 10px نمایش خواهد داد. توجه داشته باشید که در هر دو رسانه خصوصیت font-weight با مقدار "bold" تنظیم شده است:
<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;}
}
</style>
</head>
<body>
....
</body>
</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;}
}
</style>
</head>
<body>
....
</body>
</html>
اگر در حال استفاده از مرورگر firefox یا IE5 و نسخه های بالاتر هستید، صفحه بالا را چاپ کنید، خواهید دید که پاراگراف در رسانه های مختلف با فونت و اندازه های متفاوتی نمایش داده می شود.
