قوانین @media CSS

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

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

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

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

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

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

In addition to media types, there are also media features. Media features provide more specific details for media queries by allowing testing of specific characteristics of user agents or display devices. For example, you can apply styles only to screens wider or narrower than a specific width.

See also:

CSS Tutorial:پرسش و پاسخ CSS

CSS Tutorial:CSS Media Query Example

RWD Tutorial:Implementing responsive web design through media queries

JavaScript Reference Manual:window.matchMedia() method

Instance

Example 1

If the width of the browser window is 600px or less, change the background color of the <body> element to 'light blue':

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

به طور مستقیم امتحان کنید

More TIY examples can be found at the bottom of the page.

CSS Syntax

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

Meaning of not, only, and and keywords:

not: The not keyword reverses the meaning of the entire media query.

only: The only keyword prevents the specified styles from being applied by older browsers that do not support media queries with media features. It has no effect on modern browsers.

and: The and keyword combines media features with media types or other media features.

They are all optional. However, if not or only is used, the media type must also be specified.

You can also use different style sheets for different media, like this:

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

Media type

Value Description
all Default. Used for all media type devices.
print Used for printers.
screen Used for computer screens, tablets, smartphones, and more.
speech Screen reader used to read the page.

Media features

Value Description
any-hover

Is there any available input mechanism that allows the user (such as a mouse) to hover over elements?

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

Is there any pointer device available among the input mechanisms, and if so, how accurate is it?

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

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

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

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

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

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

اگر دستگاه از جدول جستجوی رنگ (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 حداکثر تعداد دودویی هر رنگ‌component در دستگاه‌های خروجی.
max-color-index تعداد بیشترین رنگ‌هایی که دستگاه می‌تواند نمایش دهد.
max-height ارتفاع بیشترین ناحیه نمایشی، به عنوان مثال پنجره مرورگر.
max-monochrome حداکثر تعداد دودویی هر
max-resolution حداکثر رزولوشن دستگاه، استفاده از dpi یا dpcm.
حداکثر عرض عرض بیشترین ناحیه نمایشی، به عنوان مثال پنجره مرورگر.
min-aspect-ratio حداقل نسبت عرض به ارتفاع ناحیه نمایشی.
min-color حداقل تعداد دودویی هر رنگ‌component در دستگاه‌های خروجی.
min-color-index تعداد کمترین رنگ‌هایی که دستگاه می‌تواند نمایش دهد.
min-height ارتفاع کمترین ناحیه نمایشی، به عنوان مثال پنجره مرورگر.
min-monochrome در دستگاه‌های یک‌رنگ (سفید و سیاه) حداقل تعداد دودویی هر
min-resolution رزولوشن کمینه دستگاه، از dpi یا dpcm استفاده می‌شود.
min-width عرض کمینه ناحیه نمایش، مانند پنجره مرورگر.
monochrome

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

اگر دستگاه‌های خروجی دارای صفحه سیاه و سفید نیستند، این مقدار 0 است.
orientation جهت چرخش视‌وگشتی (portrait یا landscape mode).
overflow-block

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

در سطح جستجوی رسانه 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

وقتی عرض مرورگر 600px یا کمتر باشد، عناصر را مخفی کنید:

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

به طور مستقیم امتحان کنید

مثال 3

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

body {
  background-color: lightblue;
}
@media screen and (min-width: 400px) {
  body {
    background-color: lightgreen;
  }
}
@media screen and (min-width: 800px) {
  body {
    background-color: lavender;
  }
}

به طور مستقیم امتحان کنید

مثال 4

یک منوی هدایت‌کننده پاسخگو ایجاد کنید (در صفحه‌های بزرگ به صورت افقی نمایش داده می‌شود و در صفحه‌های کوچک به صورت عمودی نمایش داده می‌شود):

@media screen and (max-width: 600px) {
  .topnav a {
    float: none;
    width: 100%;
  }
}

به طور مستقیم امتحان کنید

مثال 5

با استفاده از جستجوی رسانه، چیدمان ستون‌های پاسخگو را ایجاد کنید:

/* در صفحه‌هایی که عرض 992px یا کمتر است، از چهار ستون به دو ستون تبدیل می‌شود */
@media screen and (max-width: 992px) {
  .column {
    width: 50%;
  }
}
/* در صفحه‌هایی که عرض کمتر از یا برابر با 600 پیکسل است، ستون‌ها به جای قرار گرفتن در کنار یکدیگر، روی هم قرار می‌گیرند */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

به طور مستقیم امتحان کنید

مثال 6

با استفاده از جستجوی رسانه، یک وب‌سایت پاسخگو ایجاد کنید:

به طور مستقیم امتحان کنید

مثال 7

جستجوی رسانه همچنین می‌تواند برای تغییر چیدمان صفحه‌بندی بر اساس جهت مرورگر استفاده شود. می‌توانید مجموعه‌ای از ویژگی‌های CSS بنویسید که تنها در صورتی که عرض پنجره مرورگر بزرگتر از ارتفاع آن باشد (یعنی در حالت افقی) اعمال می‌شوند.

اگر حالت جهت به حالت افقی باشد، از رنگ پس‌زمینه سبز روشن استفاده کنید:

@media only screen and (orientation: landscape) {
  body {
    background-color: lightblue;
  }
}

به طور مستقیم امتحان کنید

مثال 8

با استفاده از جستجوی رسانه، رنگ متن را به سبز در حالت نمایش مستند در صفحه نمایش و به سیاه در حالت چاپ تنظیم کنید:

@media screen {
  body {
    color: green; 
  }
}
@media print {
  body {
    color: black; 
  }
}

به طور مستقیم امتحان کنید

مثال 9

لیست جدا شده با کاما: از کاما برای اضافه کردن یک جستجوی رسانه به جستجوهای رسانه موجود استفاده کنید (رفتار آن مشابه عملگر OR است):

/* وقتی عرض بین 600px و 900px است یا بیشتر از 1100px، ظاهر <div> تغییر می‌کند */
@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
  div.example {
    font-size: 50px;
    padding: 50px;
    border: 8px solid black;
    background: yellow;
  }
}

به طور مستقیم امتحان کنید

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

اعداد در جدول نشان‌دهنده نسخه اولیه مرورگرهایی است که کامل از قوانین @media پشتیبانی می‌کنند.

Chrome IE / Edge Firefox Safari Opera
21 9 3.5 4.0 9