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 است.
نتیجه پرسوجو (query) در صورتی که نوع رسانه (media type) با نوع دستگاهی که سند روی آن در حال نمایش است و نتیجه تمامی عبارات موجود در media query، true باشد، true است. زمانی که یک media query true باشد، style sheet یا قوانین style مربوطه با توجه به قوانین عادی، اعمال میشود.
مگر در مواردی که از عملگرهای not یا only استفاده کنید، نوع رسانه (به انگلیسی: media type) اختیاری است و نوع آن all
خواهد بود.
همچنین میتوانید style sheet های متفاوتی برای رسانههای متفاوت داشته باشید:
انواع رسانه در CSS3
مقدار | توضیحات |
---|---|
all | برای تمام دستگاههای از نوع رسانه استفاده میشود |
برای پرینترها استفاده میشود | |
screen | برای صفحه نمایش کامپیوترها، تبلتها، موبایلهای هوشمند و… استفاده میشود |
speech | برای صفحه خوان ها (Screenreaders) که صفحه را با صدای بلند میخوانند استفاده میشود |
مثالهای ساده Media Queries
یک راه برای استفاده از media queryها داشتن یک بخش جایگزین alternate) CSS درست درون style sheet) خودتان است.
مثال زیر background-color را در صورتی که Viewport برابر با 480 پیکسل یا بیشتر باشد به سبز روشن تغییر میدهد (اگر viewport کمتر از ۴۸۰ پیکسل باشد، background-color صورتی خواهد بود):
مثال زیر یک منو را نشان میدهد که در صورتی که viewport برابر با 480 پیکسل یا بیشتر باشد در سمت چپ قرار میگیرد (اگر viewport کمتر از ۴۸۰ پیکسل باشد، منو در بالای محتوا قرار خواهد گرفت):
مثالهای بیشتر Media Queries
برای مثالهای بیشتر در مورد media query، به صفحه بعدی بروید: [[CSS:Media queryها در CSS3 - مثالها |مثالهای MQ در CSS]].
مرجع @media در CSS
برای مرور کامل همه انواع رسانه و امکانات/ دستورات، لطفاً مرجع @media در مرجع CSS ما را مطالعه کنید.
منابع آموزشی