Media Query ها در طراحی واکنش گرا

CSS Media Queries

0 246

دوستان عزیز به این قسمت از سری آموزش پیشرفته CSS خوش آمدید. در این درس به آموزش Media Query در CSS می پردازیم. همراه ما باشید.

Media Query در CSS چیست؟

Media query ها یکی از تکنیک های جدید در CSS3 هستند. اگر ما از دستور media@ استفاده کنیم و کد CSS ای را داخل آن قرار دهیم، آن کد تنها زمانی اجرا می شود که شرط خاصی برقرار باشد. به مثال زیر توجه کنید:

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

با تغییر سایز قسمت خروجی کد بالا می بینید که رنگ پس زمینه پس از 600 پیکسل تغییر می کند!

ایجاد breakpoint ها

اگر یادتان باشد در قسمت قبلی این سری آموزشی طرحی را با استفاده از grid ایجاد کردیم اما این طرح کاملا واکنش گرا نبود و در عرض های بسیار پایین ظاهر جالبی نداشت. ما می توانیم breakpoint (نقاط شکست) ای را تعریف کنیم تا اگر عرض صفحه به آن نقطه رسید برخی از اجزاء صفحه شکل خاصی به خود بگیرند.

یک طرح فرضی در نمایشگر بزرگ
یک طرح فرضی در نمایشگر بزرگ
یک طرح فرضی در نمایشگر کوچک (موبایل)
یک طرح فرضی در نمایشگر کوچک (موبایل)

ما می خواهیم برای اصلاح طرح قبلی خود یک breakpoint را روی عرض 768px قرار دهیم:

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

همانطور که می بینید مشکل ما در این مثال حل شده است!

همیشه به دستگاه های موبایل اولویت دهید

روش Mobile First یعنی سایت را از ابتدای برای موبایل ها و سپس برای دسکتاپ ها و لپتاپ ها طراحی کنید. این کار باعث نمایش سریع تر صفحه ی شما روی دستگاه های موبایل می شود. بنابراین باید CSS خود را از مثال قبلی تغییر دهیم؛ به جای ایجاد تغییرات در عرض کمتر از 768px، تغییرات را در عرض بیشتر از 768px ایجاد می کنیم!

بدین صورت طراحی ما Mobile First می شود:

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

اضافه کردن breakpoint دوم

شما می توانید هر تعداد breakpoint که بخواهید اضافه کنید. بنابراین بهتر است برای راحتی کاربران یک breakpoint دیگر برای تبلت ها اضافه کنیم! برای این کار باید یک media query دیگر در عرض 600px اضافه کرده و برای دستگاه هایی که بین عرض های 600px و 768px هستند چند کلاس جدید بسازیم. توجه داشته باشید که دو کلاس زیر تقریبا یکی هستند و تنها تفاوتشان نام کلاس هایشان (-col و -col-s) است:

شاید در نگاه اول برایتان عجیب باشد که دو کلاس مانند هم داریم اما این کلاس ها در HTML به ما اجازه می دهند که تعیین کنیم در عرض های مختلف چه اتفاقی برای هر عنصر بیفتد.

در مثال زیر برای دسکتاپ ها گفته ایم که قسمت های اول و سوم به اندازه ی 3 ستون و قسمت میانی به اندازه 6 ستون عرض را اشغال کنند. همچنین برای تبلت ها معین کرده ایم که قسمت اول 3 ستون، قسمت دوم 9 ستون و قسمت سوم که زیر دو قسمت دیگر نمایش داده می شود 12 ستون را اشغال کنند:

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

در چه عرض هایی breakpoint قرار دهیم؟

عرض صفحات گوشی ها و تبلت ها شدیدا متغیر است بنابراین نمی توان مقدار استانداردی تعریف کرد اما معمولا پنج گروه زیر رایج ترین breakpoint ها در طراحی وب هستند:

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

در نظر گرفتن Orientation صفحه

Orientation به معنی افقی گرفتن یا عمودی گرفتن صفحه ی تبلت یا تلفن همراه است. ما می توانیم از media query ها برای کنترل این مورد نیز استفاده کنیم. اگر عرض صفحه بیشتر از ارتفاعش باشد یعنی دستگاه ما در حالت افقی قرار گرفته است بنابراین برای مثال می توانیم بگوییم:

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

مخفی کردن عناصر با media query ها

یکی از استفاده های رایج از media query ها پنهان کردن اطلاعات غیرضروری برای کاربران گوشی های همراه است. شما می توانید با دستور display:none این کار را انجام دهید:

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

تغییر اندازه ی فونت ها

ما می توانیم با استفاده از media query ها اندازه ی فونت را برای دستگاه های مختلف تنظیم کنیم. البته کتابخانه هایی برای این کار وجود دارند اما media query نیز یکی از روش های موجود است:

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

برای دیدن تفاوت breakpoint ها در مثال های بالا باید قسمت خروجی کد را تغییر اندازه دهید. با تغییر اندازه ی این قسمت متوجه تغییر اندازه ی فونت ها نیز خواهید شد.

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

ارسال نظر

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

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