آموزش CSS | رسپانسیویتی (Responsive Design)

معرفی رسپانسیویتی و نحوه استفاده از آن

رسپانسیویتی یا طراحی واکنش‌گرا به معنای ساخته شدن یک وب‌سایت است که ظاهر و ساختار آن به طور خودکار با اندازه صفحه نمایش دستگاه‌های مختلف (مانند موبایل، تبلت، لپ‌تاپ و مانیتورهای بزرگ) تطبیق پیدا کند. به عبارت ساده‌تر، شما یک کد HTML و CSS می‌نویسید، اما صفحه در هر دستگاه به شکلی مناسب و خوانا نمایش داده می‌شود، بدون اینکه محتوا بریده شود یا عناصر روی هم بیفتند.

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

نحوه استفاده از رسپانسیویتی در CSS
برای ایجاد طراحی واکنش‌گرا، ابزار اصلی در CSS «Media Queries» (پرسش‌های رسانه‌ای) است. Media Query به شما اجازه می‌دهد استایل‌های متفاوتی را بر اساس شرایط خاصی مانند عرض صفحه (width) اعمال کنید. ساختار کلی آن به این صورت است:

@media (شرط) {
  /* استایل‌هایی که فقط زمانی اعمال می‌شوند که شرط برقرار باشد */
}

برای مثال، فرض کنید می‌خواهید در صفحه‌های کوچک (عرض کمتر از ۶۰۰ پیکسل) اندازه متن و حاشیه‌ها را کاهش دهید. کد زیر را در انتهای فایل CSS خود بنویسید:

@media (max-width: 600px) {
  body {
    font-size: 14px;
  }
  .container {
    margin: 10px;
  }
}

• max-width: 600px یعنی: «تا زمانی که عرض صفحه حداکثر ۶۰۰ پیکسل است، این استایل‌ها را اعمال کن.»
• اگر صفحه بزرگتر بود، استایل‌های قبلی (خارج از Media Query) اعمال می‌شوند.

نکته مهم: معمولاً شما ابتدا استایل‌های پایه را برای صفحه‌های بزرگ (دسکتاپ) می‌نویسید و سپس با استفاده از Media Query، تنظیمات را برای صفحه‌های کوچک‌تر اصلاح می‌کنید.

چند نکته عملی برای شروع:

• واحدهای نسبی: به جای استفاده از پیکسل (px) برای اندازه‌ها، از واحدهای نسبی مانند % (درصد)، em یا rem استفاده کنید تا عناصر به صورت خودکار با اندازه‌ی صفحه تغییر کنند.
• ترتیب Media Queries: معمولاً Media Queries را در انتهای فایل CSS قرار می‌دهند تا استایل‌های خاص روی استایل‌های عمومی غلبه کنند.
• تست کردن: در مرورگر خود (مانند Chrome یا Firefox) با تغییر عرض پنجره یا استفاده از ابزار Developer Tools (دکمه Inspect و انتخاب حالت موبایل) می‌توانید نتیجه را ببینید.

با استفاده از این تکنیک، شما می‌توانید یک صفحه HTML ساده بنویسید و با افزودن Media Query، آن را برای موبایل نیز بهینه کنید. در بخش‌های بعدی، با جزئیات بیشتر و مثال‌های عملی آشنا خواهید شد.