کار با Media Query ها در CSS 3 به همراه چند مثال

CSS 3 Media Queries

0 309

دوستان و همراهان عزیز روکسو، امروز و در این درس از سری آموزشی CSS پیشرفته با آموزش media query در css در خدمت شما عزیزان هستیم.

Media Query چیست؟

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

بعدها در CSS3 به جای Media Type ها ویژگی جدیدی به نام Media Query ایجاد شد که در واقع دنباله ی همان Media Type ها بودند؛ Media Query ها به جای آنکه نوع دستگاه را بررسی کنند، قابلیت های آن را بررسی می کردند.

Media Query ها می توانند موارد بسیار زیادی را بررسی کنند که چند مورد آن ها را در لیست پایین می بینید:

  • عرض و ارتفاع viewport
  • عرض و ارتفاع دستگاه
  • orientation (گوشی یا تبلت را در حالت افقی (landscape) نگه داشته اید یا عمودی(portrait))

وضعیت پشتیبانی از Media Query ها به شرح زیر است:

خصوصیت کروم Edge فایرفاکس سافاری اپرا
media@ 21.0 9.0 3.5 4.0 9.0

ساختار استفاده از Media Query ها

Media Quey ها از یک media type به همراه یک یا چند دستور دیگر تشکیل شده اند که در آخر به true یا false می رسند:

زمانی که media type و دستورات داخل پرانتز (expression ها) همگی برای دستگاهی که سند را باز کرده، صحیح باشند آنگاه کدهای داخلش اجرا می شوند. این اتفاق همیشه انجام می شود مگر اینکه از اپراتورهای not یا or استفاده کنید؛ آنگاه اجرای آن Media Query دلخواه خواهد بود. شما می توانید فایل های CSS را نیز با استفاده از Media Query ها وارد سند HTML خود کنید. مثال:

سوالی که پیش می آید این است که Media Type ها چند نوع هستند. پاسخ این سوال در جدول زیر مشخص می شود:

Media Type توضیحات
all شامل تمام دستگاه ها می شود.
print مخصوص پرینتر ها است.
screen برای صفحات کامپیوتر، موبایل، تبلت و … است.
speech مخصوص screenreader ها است.

screenreader دستگاهی است که صفحه ی اینترنت را بلند برای کاربر می خواند. معمولا افراد نابینا یا کم بینا از این تکنولوژی استفاده می کنند.

بهتر است به سراغ مثال های عملی از Media Query برویم.

مثال های مختلف از استفاده ی عملی از Media QUery ها

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

مشاهده ی خروجی در JSBin

کمی مثال را پیشرفته تر می کنیم! در کد زیر منویی داریم که اگر viewport از 480 پیکسل کمتر باشد به سمت چپ صفحه float می شود، در غیر این صورت همان بالای صفحه می ماند:

مشاهده ی خروجی در JSBin

نکته: برای آنکه در این مثال ها متوجه تغییرات شوید باید اندازه ی قسمت خروجی را کوچک تر و بزرگ تر کنید.

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

مشاهده ی خروجی در JSBin

یکی دیگر از استفاده های رایج از Media Query ها ایجاد قالب های منعطف و چند ستونه است. در مثال زیر قالبی را تعریف کرده ایم که بر اساس سایز صفحه به قالب های چهار قسمتی، دو قسمتی و تکی تقسیم می شود:

مشاهده ی خروجی در JSBin

نکته: روش بسیار بهتری برای ایجاد قالب های منعطف وجود دارد و آن استفاده از Flexbox است. اگر در مورد آن مطلبی نمی دانید به قسمت های قبلی مراجعه کنید. ما مثال بالا را به روش Flexbox نیز پیاده سازی کرده ایم:

مشاهده ی خروجی در JSBin

یکی دیگر از استفاده های رایج Media Query ها مخفی سازی عناصر است. به طور مثال تصور کنید جدولی دارید که سایز بسیار بزرگی دارد و اطلاعات آنچنان مهمی نیز ندارد، بنابراین می توان آن را برای دستگاه های کوچک مخفی کرد تا مزاحم تجربه ی کاربری نشود:

مشاهده ی خروجی در JSBin

همچنین در طراحی های واکنش گرا نیاز به تغییر اندازه ی فونت داریم و می توانیم از Media Query ها به عنوان یکی از روش های آن استفاده کنیم:

مشاهده ی خروجی در JSBin

در آخر هم می توان به ساخت وب سایت های واکنش گرا با Media Query ها اشاره کرد:

مشاهده ی خروجی در JSBin

بررسی Orientation

برای بررسی Orientation دستگاه نیز می توان از Media Query ها استفاده کرد. به مثال زیر توجه کنید:

مشاهده ی خروجی در JSBin

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

دستورات Min Width و Max Width

max-width به معنای «حداکثر عرض» و min-width به معنای «حداقل عرض» است. تفاوت این دستور ها با width این است که اگر شرط شما 200 پیکسل بودن width باشد یعنی فقط و فقط 200 پیکسل اما اگر max-width بگذارید یعنی 200 پیکسل و کمتر و اگر min-width بگذارید یعنی 200 پیکسل و بیشتر! بنابراین شرط فراگیر تر می شود. در مثال زیر اگر عرض صفحه بین 600 و 900 پیکسل قرار بگیرد، عنصر <div> ظاهر می شود:

مشاهده ی خروجی در JSBin

البته می توانیم این مثال را پیشرفته تر کنیم و با استفاده از علامت ویرگول (در کد زیر معادل «یا» در فارسی) برای به هم چسباندن چند query جدا استفاده کنیم:

مشاهده ی خروجی در JSBin

این مثال می گوید اگر عرض صفحه بین 600 و 900 پیکسل بود یا بیشتر از 1100 پیکسل بود ظاهر <div> را تغییر بده!

امیدوارم از درس آموزش media query در css لذت برده باشید.

ترتیبی که روکسو برای یادگیری مطالب سری CSS پیشرفته به شما توصیه می‌کند:

ارسال نظر

توجه:‌ آدرس ایمیل شما منتشر نخواهد شد.

film izle | eskisehir escort | modanisa | mersin escort | www.ieski.com | eskort adana | www.izmir-eskort.org | kabak koyu | hd tv izle