کوئری Media در CSS

معرفی انواع 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 not|only mediatype and (expressions) {
CSS-Code;
}

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

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

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

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

انواع media

مقدار
شرح
all
مورد استفاده برای تمام دستگاه های نوع media است
print
مورد استفاده برای پرینترها
screen
مورد استفاده برای صفحه نمایش کامپیوتر، تبلت، تلفن های هوشمند و غیره
speech
مورد استفاده برای صفحه نمایشهایی است که "صفحه" را با صدای بلند میخواند

 

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

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

Media
@media screen and (min-width: 480px) {
    body {
        background-color: lightgreen;
    }
}
مشاهده مثال

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

مثال media
@media screen and (min-width: 480px) {
    #leftsidebar {width: 200px; float: left;}
    #main {margin-left: 216px;}
}
مشاهده مثال

 

نظر شما

لطفا نام و نام خانوادگی خود را وارد کنید
لطفا ایمیل خود را وارد کنید لطفا ایمیل صحیح وارد کنید.
لطفا متن نظر خود را وارد کنید
>

یادگیری CSS

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران (وب مهراز) بپیوندید.

لطفا شماره همراه صحیح وارد کنید.
لطفا ایمیل صحیح وارد کنید.

مقالات مرتبط