سلام و درود به رفیق رایا وردپرسی خودم 👽💗 رسیدیم به آخرین جلسه آموزش CSS تو این بخش قراره درباره مدیا کوئری (Media queries) در CSS صحبت کنیم و ببینیم اصن به چه دردی میخوره کاربردش چیه! پس با من تا انتهای این آموزش همراه باش 🙂

امیدوارم تا اینجا مسیر یادگیری CSS برات جذاب بوده باشه. چون چیزی که امروز یاد می‌گیریم، یکی از مهم‌ترین بخش‌های طراحی وب مدرنه. اگه میخوای سایتت روی هر صفحه نمایشی، از کوچیکترین گوشی تا بزرگترین مانیتور، عالی به نظر برسه، مدیا کوئری رفیق راهته! 💪

توی این مقاله قراره کاملا با مفهوم مدیا کوئری آشنا بشی، یاد بگیری چطور کدش رو بنویسی، با مثال‌های مختلف کاربردهاشو ببینی و بفهمی چطور سایتت رو “واکنش‌گرا” یا “ریسپانسیو” کنی. آماده‌ای؟ بزن بریم!

🧐چرا مدیا کوئری اینقدر مهمه؟

فکر کن الان چند نفر با گوشی، تبلت یا لپ‌تاپ دارن وب‌گردی می‌کنن. هرکی یه دستگاه با یه اندازه صفحه خاص داره. اگه سایتت فقط برای یه اندازه خاص طراحی شده باشه، تو بقیه دستگاه‌ها به هم می‌ریزه و کاربرات فراری می‌شن! مثلاً ممکنه یه دکمه تو موبایل انقدر کوچیک بشه که نتونن کلیک کنن، یا یه متن انقدر ریز بشه که چشماشون درد بگیره.

× 📣 اینجا محل دیده شدن تبلیغ شماست کلیک کن AD

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

سینتکس مدیا کوئری

حالا که فهمیدی چرا مدیا کوئری مهمه، بیا ببینیم چطور باید ازش استفاده کنی. سینتکس اصلی مدیا کوئری توی CSS این شکلیه:

.______          ___    ____    ____  ___    ____    __    ____ .______  
|   _  \        /   \   \   \  /   / /   \   \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \   \   \/   / /  ^  \   \   \/    \/   /  |  |_)  |
|      /      /  /_\  \   \_    _/ /  /_\  \   \            /   |   ___/ 
|  |\  \----./  _____  \    |  |  /  _____  \   \    /\    /    |  |     
| _| `._____/__/     \__\   |__| /__/     \__\   \__/  \__/     | _|     

این ساختار رو برات باز میکنم تا بهتر متوجه بشی:

• @media: این کلمه کلیدی شروع یک مدیا کوئری هست. مثل این می‌مونه که داری به مرورگر میگی “حواست باشه! یه سری استایل شرطی دارم اینجا!”.
• media_type: اینجا مشخص می‌کنی که این مدیا کوئری برای چه نوع رسانه‌ایه. رایج‌ترین‌ها اینا هستن:
  • screen: برای صفحه نمایش‌های رنگی مثل گوشی، تبلت، لپ‌تاپ و مانیتور. این همونیه که بیشتر از همه باهاش کار می‌کنی!
  • print: برای وقتی که کاربر میخواد صفحه سایت رو پرینت بگیره. می‌تونی استایل‌های مخصوص پرینت (مثلا حذف پس‌زمینه، تغییر فونت، مخفی کردن دکمه‌ها) رو اینجا بذاری.
  • all: برای همه انواع رسانه‌ها. خیلی کم استفاده میشه توی طراحی ریسپانسیو.
• and: این یک عملگر منطقیه به معنی “و”. می‌تونی چند تا شرط رو با and به هم وصل کنی (مثلا “نوع رسانه screen باشه و عرض صفحه حداکثر ۶۰۰ پیکسل باشه”). عملگرهای دیگه مثل not (نفی کردن شرط) و , (کاما، به معنی “یا”) هم هستن که کمتر از and استفاده میشن.
• (media_feature: value): این بخش، همون شرط یا سوالیه که از مرورگر می‌پرسی. داخل پرانتز، یه ویژگی خاص از صفحه نمایش (مثل عرض، ارتفاع، جهت) رو چک می‌کنی و براش یه مقدار تعیین می‌کنی.
  • رایج‌ترین ویژگی‌های مدیا (Media Features):
    • width: عرض ویوپورت (بخشی از صفحه که محتوای سایت رو نشون میده).
    • height: ارتفاع ویوپورت.
    • min-width: حداقل عرض. یعنی استایل‌ها اعمال میشن اگه عرض صفحه بیشتر یا مساوی این مقدار باشه.
    • max-width: حداکثر عرض. یعنی استایل‌ها اعمال میشن اگه عرض صفحه کمتر یا مساوی این مقدار باشه.
    • orientation: جهت صفحه نمایش. مقدارش می‌تونه portrait (عمودی) یا landscape (افقی) باشه.
• { /* کدهای CSS مخصوص */ }: داخل آکولاد، کدهای CSS معمولی خودت رو می‌نویسی. این کدها فقط زمانی توسط مرورگر خونده و اعمال میشن که شرط یا شرط‌های داخل پرانتز true باشن.

پس ساختار کلی اینه: یه @media میذاری، نوع رسانه رو میگی، اگه نیاز بود با and شرط‌های دیگه رو اضافه می‌کنی، شرط یا شرط‌ها رو داخل پرانتز می‌نویسی، و بعد داخل آکولاد اون استایل‌هایی که فقط توی اون شرایط خاص میخوای اعمال بشن رو قرار میدی. خیلی ساده است، نه؟ 😉

بزار برات مثال بزنم تا مطلب کامل برات جابیفته و جای سوالی باقی نمونه!

مثال ۱: تغییر رنگ پس‌زمینه برای صفحه نمایش‌ های کوچیک

فرض کن میخوای پس‌زمینه سایتت به طور پیش‌فرض سفیده، ولی اگه کسی با موبایل (صفحه نمایش کوچیک) اومد، پس‌زمینه آبی روشن بشه تا چشمش کمتر اذیت بشه.

.______          ___    ____    ____  ___    ____    __    ____ .______  
|   _  \        /   \   \   \  /   / /   \   \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \   \   \/   / /  ^  \   \   \/    \/   /  |  |_)  |
|      /      /  /_\  \   \_    _/ /  /_\  \   \            /   |   ___/ 
|  |\  \----./  _____  \    |  |  /  _____  \   \    /\    /    |  |     
| _| `._____/__/     \__\   |__| /__/     \__\   \__/  \__/     | _|     

توی این کد، استایل background-color: lightblue; فقط زمانی اعمال میشه که نوع رسانه screen باشه و عرض صفحه نمایش ۶۰۰ پیکسل یا کمتر باشه. برای صفحه نمایش‌های بزرگتر از ۶۰۰ پیکسل، پس‌زمینه سفید پیش‌فرض باقی می‌مونه.

مثال ۲: تغییر اندازه فونت عنوان اصلی در صفحه نمایش‌های مختلف

ممکنه بخوای عنوان اصلی (h1) توی دسکتاپ بزرگ باشه، توی تبلت متوسط و توی موبایل کوچیکتر.

.______          ___    ____    ____  ___    ____    __    ____ .______  
|   _  \        /   \   \   \  /   / /   \   \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \   \   \/   / /  ^  \   \   \/    \/   /  |  |_)  |
|      /      /  /_\  \   \_    _/ /  /_\  \   \            /   |   ___/ 
|  |\  \----./  _____  \    |  |  /  _____  \   \    /\    /    |  |     
| _| `._____/__/     \__\   |__| /__/     \__\   \__/  \__/     | _|     

اینجا از رویکرد Mobile First استفاده کردیم. اول اندازه فونت رو برای کوچیکترین حالت (موبایل) تعیین کردیم. بعد گفتیم “اگه صفحه نمایش حداقل ۷۶۸ پیکسل بود، اندازه‌اش رو بکن ۳۶ پیکسل” و بعد “اگه حداقل ۱۰۲۴ پیکسل بود، بکنش ۴۸ پیکسل”.

رویکرد (Mobile-First) یعنی اینکه وقتی میخوای یه وبسایت رو طراحی کنی و کد CSS براش بنویسی، نقطه شروع و اولویت اصلیت رو میذاری روی صفحه نمایش‌های کوچیک (یعنی همون گوشی موبایل). 📱

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

مثال 3: مخفی کردن یک عنصر

فرض کن یه نوار کناری (Sidebar) داری که توی دسکتاپ مهمه، ولی توی موبایل فقط جا می‌گیره و میخوای مخفیش کنی.

.______          ___    ____    ____  ___    ____    __    ____ .______  
|   _  \        /   \   \   \  /   / /   \   \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \   \   \/   / /  ^  \   \   \/    \/   /  |  |_)  |
|      /      /  /_\  \   \_    _/ /  /_\  \   \            /   |   ___/ 
|  |\  \----./  _____  \    |  |  /  _____  \   \    /\    /    |  |     
| _| `._____/__/     \__\   |__| /__/     \__\   \__/  \__/     | _|     

این کد میگه اگه عرض صفحه ۷۶۸ پیکسل یا کمتر بود، اون عنصری که کلاس sidebar داره رو نشون نده (display: none;).

نقاط شکست (Breakpoints) چی هستن؟ 🤔

همونطور که توی مثال‌ها دیدی، ما از اعدادی مثل 600px، 768px یا 1024px توی شرط‌های مدیا کوئری استفاده کردیم. به این اعداد میگن “نقاط شکست” یا “Breakpoints”. این‌ها نقاطی هستن که تصمیم می‌گیری استایل‌های سایتت تغییر کنن.

نکته مهم اینه که هیچ قانون طلایی یا لیست استانداردی برای نقاط شکست وجود نداره که بگه دقیقا توی این اعداد باید تغییر بدی! 🚫 نقاط شکست تو باید بر اساس محتوا و طراحی سایت خودت تعیین بشن. وقتی داری سایتت رو توی مرورگر باز می‌کنی و اندازه پنجره مرورگر رو کم و زیاد می‌کنی، هر جا دیدی چیدمانت بهم ریخت یا نیاز داری یه چیزی رو برای اون اندازه خاص تغییر بدی، همونجا یک نقطه شکست مناسبه.

با این حال، یه سری اندازه‌های رایج هستن که می‌تونی به عنوان نقطه شروع ازشون استفاده کنی (معمولا بر اساس اندازه‌های دستگاه‌های مختلف):

• کوچیک (موبایل): تا ۶۰۰ پیکسل
• متوسط (تبلت عمودی): ۶۰۰ پیکسل تا ۷۶۸ پیکسل
• بزرگ (تبلت افقی / لپ‌تاپ کوچک): ۷۶۸ پیکسل تا ۱۰۲۴ پیکسل
• خیلی بزرگ (دسکتاپ): ۱۰۲۴ پیکسل به بالا

اما یادت باشه، اینا فقط یه راهنمایی هستن. همیشه بر اساس نیاز طراحی خودت تصمیم بگیر.

جمع‌ بندی

خب، دیگه فکر کنم همه چی رو درباره مدیا کوئری یاد گرفتی! این ابزار جادویی بهت کمک می‌کنه سایتت رو تو هر دستگاهی خوشگل و کاربردی کنی. از اندازه صفحه گرفته تا جهت دستگاه و حتی رزولوشن، همه رو می‌تونی کنترل کنی و یه تجربه کاربری عالی بسازی. تازه، چون سایتت ریسپانسیو می‌شه، گوگل هم بیشتر دوستت داره و شانس دیده شدنت می‌ره بالا! 🌈

امیدوارم این مقاله برات مفید باشه. حالا برو دست به کد بشو و با مدیا کوئری کار کن. اگه سوالی داشتی یا چیزی رو نفهمیدی، تو کامنت‌ها بهم بگو تا بیشتر راهنمایی کنم. موفق باشی 💪✨

جلسه 6 آموزش CSS: کار با متن ها (Texts) در CSS

مطالعه

جلسه 9 آموزش CSS: کار با حاشیه (Border) در CSS

مطالعه

جلسه 14 آموزش CSS: ویژگی Outline در CSS

مطالعه