media@

بوسیله دستور @media می توان یک دسته استایل را فقط مخصوص به یک مدیای خاص نوشت.

به عنوان مثال می توان مشخص کرد که استایل های زیر فقط زمانی استفاده شوند که مدیای مورد نظر از نوع پرینت شده باشد. یعنی زمانی که سایت ما قرار است بر روی کاغد چاپ شود این استایل ها اعمال شوند:


@media print {

  /* استایل هایی که برای چاپ اعمال می شوند */
  body {
    font-size: 10pt;
  }

  a[href]:after {
    content: "(" attr(href) ")";
    /* ... */
  }

}

همانطور که در مثال بالا نشان داده شده است نیاز است که بعد از نوشتن دستور @media نوع مدیا را مشخص کنیم و بعد می توانیم داخل براکت استایل های مورد نظرمان را بنویسیم.

همینطور اگر نیاز داریم که استایل های منظور برای چندین نوع مختلف مدیا اعمال شوند می توانیم نام آنها را بوسیله ویرگول از هم جدا کنیم:


@media screen, speech {
  /* استایل های اینجا زمانی اعمال می شوند که صفحه ما توسط یک "صفحه نمایش" یا "مبدل متن به گفتار" پیمایش شود */
}

مقادیر دستور @media

مدیاهایی که در CSS قابل شناسایی هستند به شرح زیر می باشند:

غیر از موارد all، screen، print و speech بقیه موارد منسوخ شده اند.

all

استایل مورد نظر برای تمام دستگاه ها مناسب می باشد.

braille

دستگاه های بریل لمسی.

embossed

پرینترهایی که بصورت صفحه صفحه بریل چاپ می کنند.

handheld

دستگاه های قابل حمل در دست (این دستگاهها معمولا صفحه نمایش های کوچکی و پهنای باند کمی دارند)

print

استایل ها مناسب زمانی است که صفحه بصورت سند پرینت می شود یا بر روی صفحه نمایش در حالت پرینت نمایش داده می شود.

projection

به عنوان مثال پروژکتورها

screen

صفحه نمایش های رنگی. این نوع مدیا رایج ترین نوع مدیا برای نمایش صفحات وب می باشد.

speech

مبدل های متن به گفتار

tty

این نوع فقط با متن سر و کار دارد به عنوان مثال ترمینال ها یا مرورگرهای متنی مثل Lynx و Links. همچنین در این نوع نمی توانیم از واحد px در سی اس اس استفاده کنیم.

در تصویر زیر صفحه وب در مرورگر فایرفاکس و Lynx نمایش داده شده است:

مرورگرهای مبتی بر متن

tv

دستگا های نوع تلوزیونی (رزولوشن پایین، رنگی، صفحات نمایشی با قابلیت اسکرول محدود، دارای صدا)

غیر از موارد all، screen، print و speech بقیه موارد منسوخ شده اند.

Media Query

یک مدیا کوئری دستوری است که یک یا چند نوع مدیا را مشخص می کند و همچنین می تواند شامل عبارات شرطی باشد که شرایط خاصی را بر اساس ویژگی های آن مدیا بیان می کند.

این ویژگی ها شامل عرض، ارتفاع، رنگ و غیره می باشند.

مثلا می توانیم مشخص کنیم که استایل های مورد نظر فقط در صفحه نمایش هایی بزرگتر تر از 60em اعمال شود.



@media screen and (min-width: 60em) {
  /* استایل ها */
}

@media handheld and (min-width: 10em), screen and (min-width: 20em) {  
  /* دستگها های قابل حمل دردستی که بزرگتر از 10 هستند و صفحه نمایش هایی که بزرگتر از 20 می باشند */
}

برای اطلاعات بیشتر به مطلب مربوط به Media Query مراجعه کنید.

اگر نوع مدیا را مشخص نکنیم بطور پیشفرض استایل ها برای تمام مدیاها اعمال می شوند. این بدین معنی است که موارد زیر با هم برابر هستند:



@media all and (min-width: 60em) {
  /* استایل ها */
}


@media (min-width: 60em) {
  /* استایل ها */
}


از دستور @media می توانیم در هرجای فایل CSS که نیاز داشته باشیم استفاده کنیم.

همچنین در HTML می توانیم بصورت زیر مشخص کنیم که فایل استایل مورد نظر فقط برای یک مدیا خاص اعمال شود.


<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />

در مثال زیر فایل استایل مربوط به پرینت جدا در نظر گرفته شده است:


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

دموی زیر را بررسی کنید:

 

See the Pen @media by Mojtaba Seyedi (@seyedi) on CodePen.


 

پشتیبانی مرورگر ها

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *