Media Queries

از ویکی‌کد
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Css-menu.jpg
موارد آموزشی
CSS پیشرفته
۱گوشه‌های گرد
۲کادر تصاویر
۳پس‌زمینه‌ها
۴رنگ‌ها
۵Gradientها
۶سایه‌ها
۷افکت‌های متن
۸قلم‌های وب
۹2D Transforms
۱۰3D Transforms
۱۱Transitions
۱۲انیمیشن‌ها
۱۳Tooltip
۱۴استایل‌دهی تصاویر
۱۵ویژگی object-fit
۱۶دکمه‌ها
۱۷مثال‌های صفحه‌بندی (Pagination)
۱۸ستون‌های متعدد
۱۹رابط کاربری
۲۰متغیرها
۲۱Box Sizing
۲۲Flexbox
۲۳Media Queries
۲۴مثال‌های Media Queries
واکنش‌گرایی
Grid در CSS
مثال‌ها
مرجع‌ها

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

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

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

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

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

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

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

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

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

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

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

ویژگی Chrome Internet Explorer / Edge Firefox Safari Opera
@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


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

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

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

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

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

مثال
1 @media screen and (min-width: 480px) {
2   body {
3     background-color: lightgreen;
4   }
5 }


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

مثال
1 @media screen and (min-width: 480px) {
2   #leftsidebar {width: 200px; float: left;}
3   #main {margin-left: 216px;}
4 }


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

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

مرجع @media در CSS

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


منابع آموزشی