نمایش رسانه ها (Media Queries) در CSS3

10 / 10
از 1 کاربر

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

قانون media@ که در CSS2 معرفی شد، این امکان را فراهم کرد تا بتوان سبک های مختلفی را برای انواع متفاوت رسانه ها تعریف کرد. برای مثال شما می توانید سبک قواعدی را برای صفحه نمایش کامپیوترها، یک سبک برای پرینتر ها، سبکی برای دستگاه های دستی و یک سبک برای انواع تلوزیون و غیره تنظیم کنید. متاسفانه این انواع رسانه ها به جز رسانه های چاپی، توسط دستگاه ها پشتیبانی چندانی نمی شوند

CSS3 نمایش رسانه ها (Media Queries) را معرفی کرد

نمایش رسانه ها در CSS3 ایده انواع رسانه ها در CSS2 را گسترش داد: در CSS3 به جای توجه به نوع دستگاه به قابلیت های دستگاه توجه می شود. نمایش رسانه ها برای بررسی چیزهای بسیاری مورد استفاده قرار می گیرد. از جمله:

• عرض و ارتفاع دید

• عرض و ارتفاع دستگاه

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

• وضوح

استفاده از این ویژگی در طراحی سایت یک تکنیک محبوب برای ارائه یک سبک متناسب با تبلت، آیفون و اندروید است.

ترکیب نمایش رسانه ها

یک media query شامل یک نوع رسانه (media type) است و می تواند دربردارنده یک یا چند عبارت (expressions) باشد.

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

مثال ساده ای از نمایش رسانه ها در CSS3

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

ارسال نظر و نظرات ثبت شده