مدیا کوئری در طراحی سایت با css3

10 / 10
از 1 کاربر

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

معرفی نمایش رسانه ها (مدیا کوئری) در CSS3

مدیا کوئری در طراحی سایت با css3 در واقع گسترش ایده های رسانه ها در CSS2 است: در طراحی سایت با css3 ، مدیا کوئری ها به جای توجه به نوع دستگاه، به قابلیت دستگاه ها توجه می کنند.

مدیا کوئری ها در طراحی سایت می توانند، چیزهای زیادی را بررسی کنند که برخی از آنها در زیر اشاره شده است:

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

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

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

• وضوح و رزولیشن

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

نحوه نوشتن مدیا کوئری

یک مدیا کوئری متشکل از نوع مدیا و یک یا چند عبارت دیگر است که در مورد صحیح و نادرست بودن تصمیم می گیرد.

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

نتیجه کوئری در صورتی صحیح (true) است که نوع رسانه مشخص شده با نوع دستگاهی که سند در آن نمایش داده می شود، مطابق باشد و تمام عبارت در مدیا کوئری صحیح باشند. زمانی که مدیا کوئری صحیح اجرا می شود، قوانین و قاعده ها مکتوب در طراحی سایت اعمال می شود و قاعده های طبیعی css دنبال می شود. علاوه بر این شما می توانید در طراحی سایت از شیوه نامه نویسی های مختلف برای رسانه های متفاوت استفاده کنید:

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

به مثال زیر در زمینه استفاده از مدیا کوئری در طراحی سایت با css3 توجه نمایید:

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

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