@media این امکان را می دهد که درون یک فایل css، رسانه های مختلفی را تحت کنترل خود در آورید به جای اینکه برای هر رسانه به طور جداگانه فایل css طراحی کنید. مثلا:
@media screen{ /* استایل نمایش در کامپیوتر*/
p.first,
p.second{
font:1.2em/1.7em Tahoma;
padding:30px;
direction:rtl;
}
و
@media print{ /* استایل مخصوص چاپ */
p.first,
p.second{
font:.9em/1.7em arial,serif;
padding:10px;
direction:rtl;
}
img,
p.second}
display:none;
{
مثالی از برخی از mediaها عبارتند از:
@media all یا media=all
در این حالت، استایل مورد نظر، برای تمام حالات مورد استفاده قرار میگیرد. یعنی برای مثال حالت چاپ با حالتی که در صفحه کامپیوتر دیده میشود تفاوتی نمیکند.
@media screen یا media=screen
این رسانه برای وسایلی که دارای صفحه نمایش بزرگ هستند (نظیر کامپیوتر، تبلت و گوشیهای هوشمند) مناسب است.
media screen دارای حالات مختلفی است و میتوانید بر اساس اندازه ی صفحه نمایش، استایلهای متفاوتی را درنظر بگیرید .
@media print یا media=print
یکی از پرکاربردترین و ضروریترین media ها، حالت چاپ یا پرینت است. اغلب وبسایتها دارای بخشهای متفاوتی در صفحه هستند، برای مثال منو، تبلیغات، ستون کناری و … ولی هیچکدام از این موارد برای فردی که قصد دارد صفحه را چاپ کند مفید نیستند و به عبارتی باعث هدر رفتن جوهر چاپ و برگه های اضافی میشود. با بکارگیری استایل print میتوانیم موارد اضافی را حذف کنیم تا فقط متن مقاله و عنوان سایت در نسخه ی چاپی نمایش داده شود.
