قوانین @media CSS

تعریف و استفاده

@media قوانین در معیارهای رسانه برای اعمال استایل‌های مختلف برای نوع‌های رسانه/دستگاه مختلف استفاده می‌شوند.

معیارهای رسانه می‌توانند برای بررسی بسیاری از چیزها استفاده شوند، مانند:

  • عرض و ارتفاع视گاه
  • عرض و ارتفاع دستگاه
  • جهت (آیا تلفن یا تبلت در حالت افقی یا عمودی قرار دارد؟)
  • حلضل

استفاده از معیارهای رسانه یک تکنیک محبوب است که برای ارائه استایل‌های سفارشی برای کامپیوترهای رومیزی، لپ‌تاپ‌ها، تبلت‌ها و تلفن‌های همراه استفاده می‌شود (طراحی وب واکنش‌گرا).

آپ می‌توانید از معیارهای رسانه برای تعیین استایل‌هایی که تنها برای مستندات چاپی یا خواننده‌های صفحه نمایش مناسب هستند (mediatype: print، screen یا speech) استفاده کنید.

میڈیا کی نوعیت کے علاوہ میڈیا کی خصوصیات بھی موجود ہیں۔ میڈیا کی خصوصیات کا استعمال، میڈیا کی تحقیق کو مزید خصوصی تفصیلات فراہم کرتی ہیں، جیسے مثال کے طور پر، آپ استایلز کو صرف مخصوص پیمائش کی سکرین پر استعمال کرسکتے ہیں۔

مزید دیکھیئے:

CSS تعلیمکیس سی ایس میڈیا کوئری

CSS تعلیمCSS میڈیا کی تحقیق مثال

RWD تعلیممیڈیا کی تحقیق کے ذریعے پلانٹری ویب ڈیزائن کا استعمال

JavaScript مراجع کتابwindow.matchMedia() طریقت

مثال

مثال 1

اگر براوزر کی وسیعتی 600 پیکس یا اس سے کم ہو تو <body> علامت کی پس منظر رنگ کو 'نوازک آبی' بنادیں

@media only screen and (max-width: 600px) {
  بادی {
    بگیشن رنگ: لائٹ بلو;
  }
}

نفس خود سے کوشا

صفحات کی نچلی حصے میں مزید TIY مثال تلاش کرسکتے ہیں

CSS گرامر

@media not|only mediatype and (mediafeature and|or|not mediafeature) {
  CSS-کد;
}

not، only اور and کی لفظ کا معنوًا:

نہ: not کی لفظ سے پورے میڈیا کی تحقیق کا معنوًا وارث کردار ادا کرتا ہے

فقط: only کی لفظ سے قدیمی براوزرز میں طے شدہ استایلز کا استعمال روکا جاسکتا ہے، جو میڈیا کی خصوصیات سے مدد کی تحقیق نہیں کرتے، لیکن یہ جدید براوزرز پر اثر نہیں دیتا

اور: and کی لفظ میں میڈیا کی خصوصیات کو میڈیا کی نوعیت یا دیگر میڈیا کی خصوصیات کے ساتھ جوڑا جاتا ہے

انہیں سبھی اختیاری طور پر استعمال کیاجاسکتا ہے، لیکن اگر not یا only استعمال کیاگیا تو اس کے ساتھ میڈیا کی نوعیت بھی طے کرنے کی ضرورت ہوتی ہے

آپ مختلف میڈیا کیلئے مختلف استایل شیٹس استعمال کرسکتے ہیں، مثلاً:

<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen.css">
<link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css">
....

میڈیا کی نوعیت

مقدار وصف
all مقصد سے
print پرنٹر استعمال کریں
screen کمپیوٹر اسکرین، تبلٹ کمپیوٹر، اسمارٹ فون وغیرہ استعمال کریں
speech صفحات کی خواندگی کیلئے اسکرین ریڈر استعمال کریں

میڈیا کی خصوصیات

مقدار وصف
any-hover

کوئی بولت دروازہ موجود ہے یا نہیں جس کی مدد سے استعمال کنندہ (موس وغیرہ) علامت پر لگا رہا ہو؟

در سطح کوئریهای رسانه‌ای 4 اضافه شده است.
any-pointer

کوئی بولت دروازہ موجود ہے یا نہیں، اگر موجود ہے تو اس کی دقت کیا ہے؟

در سطح کوئریهای رسانه‌ای 4 اضافه شده است.
aspect-ratio نسبت عرض به ارتفاع视‌اندام (viewport).
color

بیت‌های هر پیکسل دستگاه خروجی، معمولاً 8، 16، 32 بیت.

اگر دستگاه از نمایش رنگ پشتیبانی نمی‌کند، این مقدار 0 است.
color-gamut

دامنه رنگی که کاربرندها و دستگاه‌های خروجی به طور تقریبی پشتیبانی می‌کنند.

در سطح کوئریهای رسانه‌ای 4 اضافه شده است.
color-index

تعداد ورودی‌های جدول جستجوی رنگ (color lookup table) دستگاه خروجی.

اگر دستگاه از جدول جستجوی رنگ استفاده نمی‌کند، این مقدار 0 است.
device-aspect-ratio

نسبت عرض به ارتفاع دستگاه خروجی.

در Media Queries Level 4 از کار افتاده است.
device-height

ارتفاع سطح رندر دستگاه خروجی (مانند صفحه).

در Media Queries Level 4 از کار افتاده است.
device-width

عرض سطح رندر دستگاه خروجی (مانند صفحه).

در Media Queries Level 4 از کار افتاده است.
display-mode

حالت نمایش برنامه، مانند عضو display در manifest web app مشخص شده است

در spec Web App Manifest تعریف شده است.
forced-colors

آیا کاربرندها پالت رنگ را محدود کرده‌اند؟

در سطح کوئریهای رسانه‌ای 5 اضافه شده است.
grid آیا دستگاه از صفحه شبکه یا صفحه پیکسلی استفاده می‌کند؟
height ارتفاع视‌اندام (viewport).
hover

آیا مکانیزم ورودی اصلی اجازه می‌دهد که کاربر موس را روی عنصر قرار دهد؟

در سطح کوئریهای رسانه‌ای 4 اضافه شده است.
inverted-colors

آیا مرورگر یا سیستم عامل پایه رنگ‌ها را معکوس کرده‌اند؟

در سطح کوئریهای رسانه‌ای 5 اضافه شده است.
light-level

سطح نور محیط فعلی.

در سطح کوئریهای رسانه‌ای 5 اضافه شده است.
max-aspect-ratio بیشترین نسبت عرض به ارتفاع منطقه نمایش.
max-color بیشترین تعداد دودویی برای هر جزء رنگی دستگاه خروجی.
max-color-index تعداد بیشترین رنگ‌هایی که دستگاه می‌تواند نمایش دهد.
max-height بیشترین ارتفاع منطقه نمایش، مانند پنجره مرورگر.
max-monochrome بیشترین تعداد دودویی برای هر
max-resolution بیشترین رزولوشن دستگاه، استفاده از dpi یا dpcm.
max-width عرض بیشینه منطقه نمایش، مانند پنجره مرورگر.
min-aspect-ratio حداقل نسبت عرض به ارتفاع منطقه نمایش.
min-color حداقل تعداد دودویی برای هر جزء رنگی دستگاه خروجی.
min-color-index تعداد حداقلی رنگ‌هایی که دستگاه می‌تواند نمایش دهد.
min-height ارتفاع حداقلی منطقه نمایش، مانند پنجره مرورگر.
min-monochrome در دستگاه‌های یک‌رنگ (مات) هر
min-resolution رزولوشن کمینه دستگاه، از dpi یا dpcm استفاده می‌شود.
min-width عرض کمینه ناحیه نمایش، مانند پنجره مرورگر.
monochrome

عمق بیت هر پیکسل در فریم‌缓冲 ساده دستگاه‌های خروجی.

اگر دستگاه‌های خروجی سیاه و سفید نداشته باشند، این مقدار 0 است.
orientation جهت چرخش پنجره (viewport) (مود پورتره یا پورترت).
overflow-block

طریقه‌ای که دستگاه‌های خروجی محتوایی که از محور عمودی (viewport) پر شده است، را پردازش می‌کنند.

در سطح کوئریهای رسانه‌ای 4 اضافه شده است.
overflow-inline

آیا محتوایی که از محور عمودی (viewport) پر شده است، قابل حرکت است؟

در سطح کوئریهای رسانه‌ای 4 اضافه شده است.
pointer

آیا مکانیزم ورودی اصلی یک دستگاه اشاره‌گر است؟ اگر بله، دقت آن چگونه است؟

در سطح کوئریهای رسانه‌ای 4 اضافه شده است.
prefers-color-scheme

تشخیص اینکه کاربر تمایل به انتخاب سمت روشن یا تاریک دارد.

در سطح کوئریهای رسانه‌ای 5 اضافه شده است.
prefers-contrast

تشخیص اینکه کاربر آیا درخواست کرده است تا کنتراست بین رنگ‌های مشابه افزایش یابد یا کاهش یابد.

در سطح کوئریهای رسانه‌ای 5 اضافه شده است.
prefers-reduced-motion

آیا کاربر می‌خواهد دینامیک کمتری در صفحه ظاهر شود؟

در سطح کوئریهای رسانه‌ای 5 اضافه شده است.
prefers-reduced-transparency

آیا کاربر تمایل به انتخاب شفافیت کمتر دارد؟

در سطح کوئریهای رسانه‌ای 5 اضافه شده است.
resolution رزولوشن دستگاه‌های خروجی، از dpi یا dpcm استفاده می‌شود.
scan روند اسکن دستگاه‌های خروجی (مثلاً تلویزیون‌ها).
scripting

تشخیص اینکه اسکریپت (مثلاً JavaScript) قابل استفاده است یا خیر.

در سطح کوئریهای رسانه‌ای 5 اضافه شده است.
update

تناوب به‌روزرسانی محتوای دستگاه‌های خروجی.

در سطح کوئریهای رسانه‌ای 4 اضافه شده است.
width عرض پنجره (viewport).

مثال‌های بیشتر

مثال 2

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

@media screen and (max-width: 600px) {
  div.example {
    display: none;
  }
}

نفس خود سے کوشا

مثال 3

اگر عرض ویجت 800 پیکسل یا بیشتر باشد، از کوئریهای رسانه‌ای برای تنظیم رنگ پس‌زمینه به لیلوی استفاده کنید؛ اگر عرض ویجت بین 400 تا 799 پیکسل باشد، از کوئریهای رسانه‌ای برای تنظیم رنگ پس‌زمینه به سبز روشن استفاده کنید. اگر عرض ویجت کمتر از 400 پیکسل باشد، رنگ پس‌زمینه به رنگ آبی روشن خواهد بود:

بادی {
  بگیشن رنگ: لائٹ بلو;
}
@media screen and (min-width: 400px) {
  بادی {
    background-color: lightgreen;
  }
}
@media screen and (min-width: 800px) {
  بادی {
    background-color: lavender;
  }
}

نفس خود سے کوشا

مثال 4

ایک ریسپانسیو ناٹوگیشن میوز نین بنائیں (بڑے سکرین پر افقی طور پر دکھائی جائیں، چھوٹے سکرین پر عمودی طور پر دکھائی جائیں):

@media screen and (max-width: 600px) {
  .topnav a {
    فلوت: نہیں;
    وائیڈتھ: 100%;
  }
}

نفس خود سے کوشا

مثال 5

میڈیا کوئمات کا استعمال سے ریسپانسیو ستون بولیاگ بنانے کے لئے استعمال کریں:

/* جب چوکیدار 992 پائیکسلو یا اس سے کم ہو تو چار ستون سے دو ستون میں تبدیل کریں */
@media screen and (max-width: 992px) {
  .column {
    وائیڈتھ: 50%;
  }
}
/* جب چوکیدار 600 پائیکسلو یا اس سے کم ہو تو کیونکہ کلومیپ کا استعمال سے ستون کا استعمال سمت پچھلے سمت میں بند نہ کریں، بلک ہی پارا پارا کریں */
@media screen and (max-width: 600px) {
  .column {
    وائیڈتھ: 100%;
  }
}

نفس خود سے کوشا

مثال 6

میڈیا کوئمات کا استعمال سے ریسپانسیو ویب سائٹ بنانے کے لئے استعمال کریں:

نفس خود سے کوشا

مثال 7

میڈیا کوئمات کا استعمال کئی طرح سے کیا جاسکتا ہے، مثلاً بجائے براوزر کی اورینٹیشن کی بنیاد پر پیج کی بولیاگ کو بدلنا ہو سکتا ہے۔ آپ کئی سی ایس ایس اپریشن لکھ سکتے ہیں، جو صرف براوزر کی وائنڈس کا پائیدار کی عمود کی طرح کا کا کارروائی کریں (یعنی ‘کمرش’ اورینٹیشن) جب تک وائنڈس کی پائیدار کی عمود کی طرح کا کا کارروائی کریں۔

اگر اورینٹیشن کمرش کی طرح کا ہو تو یہ استعمال سے لائٹ بلو کا پس منظر استعمال کریں:

@media only screen and (orientation: landscape) {
  بادی {
    بگیشن رنگ: لائٹ بلو;
  }
}

نفس خود سے کوشا

مثال 8

میڈیا کوئمات کا استعمال سے دسکرین پر دکھانے کے لئے سبز رنگ، پرنٹ کے لئے بلک رنگ کا رُنگ سیٹ کریں:

@media screen {
  بادی {
    رنگ: گرین; 
  }
}
@media print {
  بادی {
    رنگ: بلک; 
  }
}

نفس خود سے کوشا

مثال 9

کوئمات سے منقسم فہرست: کوئمات کا استعمال سے دوسرے میڈیا کوئمات کو موجود میں میں شامل کریں (جس کا کام مشابہ OR کا کارروائی ہوتا ہے):

/* جب چوکیدار 600px اور 900px کے درمیان ہو یا 1100px سے زیادہ ہو - <div> کی نمائش بدل دیجئے */
@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
  div.example {
    فونٹ سائز: 50 پائین;
    پیدینگ: 50 پیکسلو;
    بوردر: 8 پیکسلو سولڈ بلک;
    بگیشن: زرد;
  }
}

نفس خود سے کوشا

براوزر کی مدد

جداول میں دوسرے اعداد @media قوانین کی پورا مدد کا پہلا براوزر کی نسخہ کو کہتے ہیں。

کروم آئی ای / ایج فائرفاکس سافری اوپرا
21 9 3.5 4.0 9