معرفی انواع media در CSS2

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

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

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

معرفی کوئری Media در CSS3

کوئری Media در CSS3 CSS2 ایده های نوع رسانه ای را گسترش داد: به جای جستجوی یک نوع دستگاه، آنها به قابلیت دستگاه نگاه می کنند.

کوئری Media می تواند برای بررسی بسیاری از موارد، از جمله:

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

با استفاده از پرس و جو های رسانه ای یک روش محبوب برای ارائه یک ورق سبک مناسب به دسکتاپ، لپ تاپ، قرص و تلفن های همراه (مانند تلفن های آیفون و آندروید) است.

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

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

ویژگی

@media

21.0

9.0

3.5

4.0

9.0

ساختار کوئری Media

کوئری Media شامل نوع Media است و می تواند شامل یک یا چند عبارات، که به درستی یا نادرست حل شود.

نتیجه کوئری درست است اگر نوع Media مشخص شده مطابق با نوع دستگاه سند نمایش داده شده است و تمام عبارات در کوئری Media درست است. هنگامی که کوئری Media درست است، قوانین style مربوطه یا قوانین اعمال می شود،

مگر اینکه از اپراتورهای نه تنها و یا تنها استفاده کنید، نوع رسانه ها اختیاری است و تمام نوع به صورت ضمنی خواهد بود.

شما همچنین می توانید سبک های مختلف برای رسانه های مختلف داشته باشید:

انواع media

مثال ساده کوئری Media

مثال زیر رنگ پسزمینه را به نور سبز تغییر می دهد اگر دید 480 پیکسل عرض یا وسیع تر باشد (اگر نمای دید کمتر از 480 پیکسل باشد، پس زمینه رنگ صورتی خواهد بود):

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

مثال زیر منو را نشان می دهد که به سمت چپ صفحه نمایش داده می شود اگر عرض نمایش 480 پیکسل عرض یا وسیع تر باشد (اگر دیدگاه کمتر از 480 پیکسل باشد، این منو در بالای محتوا قرار می گیرد):

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