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.


 

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

بیشتر بخوانید

16 دیدگاه برای “media@”

  1. باسلام وخسته نباشید.
    میخواستم بدونم چجوری میشه که به دستور هایی که تو media وارد میکنیم، دستور !important نداد؟
    آخه من هر وقت میخوام دستور media بزنم، باید همه ی استایل های داخل media رو !important کنم!؟ آیا راهی برای حل این مشکل هستش؟

    پاسخ

    1. سلام، همچین مشکلی وجود نداره، ولی برای اینکه بفهمم چکاری رو دارید اشتباه انجام میدید که موجب این مشکل میشه باید کدتون رو ببینم، یک دمو توی سایت jsbin.com یا codepen.io درست کنید و لینکش رو بزارید اینجا تا بررسی کنم. اگرهم سوالتون رو در پنل بحث و گفتگو مطرح کنید خیلی بهتره.

      ممنونم

      پاسخ

      1. بلاخره پیدا کردم مشکل از کجاست!
        ببینید وقتی به کلاس container ( مثلا ) width میدم
        باید تو media screen اون width رو !important کنم تا کد اجرا بشه!!!!!
        راهنمایی کنید…
        ممنونم

        پاسخ

        2. به صورت خلاصه و کلی ، در وب‌سایت‌های واکنشگرا که اگه هم نمی‌دونید واکنشگرا یا همون ریسپانسیو چی هست باید بگم که وقتی شما وب‌سایتی رو با هر مدل دستگاهی ( گوشی ، تبلت ، کامپیوتر و .. ) می‌بینی خیلی قشنگ و خوشگل بهت محتوا رو بدون هیچ کم و زیادی ( فضای‌های خالی افقی که باید Scroll کنی ، زوم کردن روی محتوا ) و مشکلاتی از این قبیل رو نمی‌بینی یا منو‌هایی که می‌بینی و در دستگاه‌های مختلف به صورت‌های مختلف نمایش داده می‌شوند ؛ این‌ها همه کار‌ها توسط مدیا‌کوئری و viewport چه بصورت فریم‌ورک مانند بوت‌استرپ یا کد‌نویسی اختصاصی انجام میشه .
          امیدوارم که متوجه شده باشید .

          پاسخ

  2. سلام با بخش @media تازه اشنا شدم و برام نامفهوم بود چیکار میکنه و باید کجاها حتما استفاده کنیم.
    ممنون میشم برام توضیح بدید

    پاسخ

  4. سلام استاد..:)
    وقتتون بخیر….
    جسارتا استاد بنده مفهدم کلی @media رو فهمیدم، ولی هر کاری میکنم بازم نمی تونم از media استفاده کنم…. دیگه واقعا خسته شدم.
    این دمویی هست که دارم روش کار میکنم، ممنون میشم اگه تونستید ایرادم رو بگید.. meta tag مربوط به media رو هم گذاشتم.
    https://codepen.io/Monireh12/pen/eYYpXjj

    پاسخ

    1. سلام، همچنین
      only دیگه آنچنان کاربردی نداره، قبلا ازش استفاده میشد که مرورگرهایی که شروط عرض رو متوجه نمیشدند جلوشونو گرفت. از روی معنیش هم مفهومه که میگه “فقط اگر همه شروط برقرار بود” این استایل ها رو اعمال کن.

      not هم که میگه هرچی شرط نوشتم اگر برعکسش برقرار بود این این استایل ها رو اعمال کن.

      پاسخ

  6. سلام خسته نباشید
    برای اینکه بخوام وبسایت برای همه نمایشگر ها به صورت یکسان نمایش داده بشن باید چه کدی رو بزنم ؟

    پاسخ

  7. هر مفهومی رو که متوجه نشم اخرش با سایت شما همه چیز دستگیرم میشه. واقعا ممنون و خسته نباشید بابت این سایت خوبتون و مطالب کاربردی

    پاسخ

سوال داری؟ برو به پنل پرسش و پاسخ

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