Media Queries

« صفحهٔ قبل

صفحهٔ بعد »

CSS2 انواع رسانه (Media) را معرفی کرد

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

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

متأسفانه این نوع رسانه به غیر از رسانه‌های چاپی، توسط دستگاه‌های زیادی پشتیبانی نشدند.

Media Queries ،CSS3 را معرفی کرد

Media queryها در CSS3 ایده انواع رسانه (media types) را توسعه داد: به جای نگاه کردن به جستجوس نوع یک دستگاه، آنها به ظرفیت دستگاه نگاه می‌کنند.

Media queryها می‌توانند برای بررسی موارد استفاده شوند، همانند:

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

استفاده از media queryها روش محبوبی برای ارائه یک style sheet مناسب برای دستگاه‌های رومیزی (desktop)، لب تاب‌ها، و دستگاه‌های موبایل (مانند iphone و موبایل‌های اندرویدی) هستند.

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

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

ویژگی
@media	۲۱٫۰	۹٫۰	۳٫۵	۴٫۰	۹٫۰

شیوه نوشتار Media Query

یک media query شامل یک بخش media type است و می‌تواند شامل یک یا چند عبارت باشد، که نتیجه آنها true یا false است.

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

نتیجه پرس‌وجو (query) در صورتی که نوع رسانه (media type) با نوع دستگاهی که سند روی آن در حال نمایش است و نتیجه تمامی عبارات موجود در media query، true باشد، true است. زمانی که یک media query true باشد، style sheet یا قوانین style مربوطه با توجه به قوانین عادی، اعمال می‌شود.

مگر در مواردی که از عملگرهای not یا only استفاده کنید، نوع رسانه (media type) اختیاری است و نوع آن allخواهد بود.

همچنین می‌توانید style sheet های متفاوتی برای رسانه‌های متفاوت داشته باشید:

<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">

انواع رسانه در CSS3

مقدار	توضیحات
all	برای تمام دستگاه‌های از نوع رسانه استفاده می‌شود
print	برای پرینترها استفاده می‌شود
screen	برای صفحه نمایش کامپیوترها، تبلت‌ها، موبایل‌های هوشمند و… استفاده می‌شود
speech	برای صفحه خوان ها (Screenreaders) که صفحه را با صدای بلند می‌خوانند استفاده می‌شود

مثال‌های ساده Media Queries

یک راه برای استفاده از media queryها داشتن یک بخش جایگزین alternate) CSS درست درون style sheet) خودتان است.

مثال زیر background-color را در صورتی که Viewport برابر با 480 پیکسل یا بیشتر باشد به سبز روشن تغییر می‌دهد (اگر viewport کمتر از ۴۸۰ پیکسل باشد، background-color صورتی خواهد بود):

مثال

@media screen and (min-width: 480px) {
  body {
    background-color: lightgreen;
  }
}

مشاهدهٔ نتیجه

مثال زیر یک منو را نشان می‌دهد که در صورتی که viewport برابر با 480 پیکسل یا بیشتر باشد در سمت چپ قرار می‌گیرد (اگر viewport کمتر از ۴۸۰ پیکسل باشد، منو در بالای محتوا قرار خواهد گرفت):

مثال

@media screen and (min-width: 480px) {
  #leftsidebar {width: 200px; float: left;}
  #main {margin-left: 216px;}
}

مشاهدهٔ نتیجه

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

برای مثال‌های بیشتر در مورد media query، به صفحه بعدی بروید: [[CSS:Media queryها در CSS3 - مثال‌ها |مثال‌های MQ در CSS]].

مرجع @media در CSS

برای مرور کامل همه انواع رسانه و امکانات/ دستورات، لطفاً مرجع @media در مرجع CSS ما را مطالعه کنید.

« صفحهٔ قبل

صفحهٔ بعد »