امروزه کاربران وب از دستگاه‌های مختلفی استفاده می‌کنند؛ از موبایل‌های کوچک گرفته تا تبلت، لپ‌تاپ و مانیتورهای بزرگ. اگر می‌خواهیم یک وب‌سایت حرفه‌ای بسازیم، باید مطمئن باشیم که در همه این دستگاه‌ها ظاهر سایت بی‌نقص باشد. به همین دلیل، طراحی واکنش‌گرا یا Responsive Design تبدیل به یک اصل مهم در طراحی وب شده است. قلب این طراحی چیزی نیست جز Media Queries در CSS که کمک می‌کند ظاهر سایت متناسب با اندازه صفحه تغییر کند.

Media Queries چیست؟ {#media-queries-چیست}

Media Queries در CSS قابلیتی است که به ما اجازه می‌دهد بر اساس شرایط خاص، مثل اندازه صفحه نمایش، نوع دستگاه یا حتی ویژگی‌های دیگر مثل جهت صفحه، استایل‌های متفاوتی را به المان‌های سایت اختصاص دهیم. به زبان ساده، به کمک Media Queries می‌توانیم کاری کنیم که سایت ما در موبایل، تبلت و دسکتاپ ظاهر متفاوت و بهینه‌ای داشته باشد.

مثلاً فرض کن بخواهیم وقتی عرض صفحه از ۷۶۸ پیکسل کمتر شد، منو مخفی شود. این کار با Media Query به‌سادگی انجام می‌شود:

@media (max-width: 768px) {
  .menu {
    display: none;
  }
}

Mobile First Design چیست؟ {#mobile-first-design-چیست}

یکی از اصول بسیار مهم در طراحی واکنش‌گرا، Mobile First Design است. در این روش، ابتدا طراحی و استایل‌ها را برای کوچک‌ترین سایز صفحه، یعنی موبایل، انجام می‌دهیم. سپس با کمک Media Queries، تغییرات لازم را برای صفحه‌های بزرگ‌تر اعمال می‌کنیم.

این روش مزیت‌های زیادی دارد. اول اینکه سایت برای کاربران موبایل سریع‌تر و بهینه‌تر بارگذاری می‌شود و دوم اینکه مدیریت تغییرات در سایزهای مختلف بسیار ساده‌تر است. در رویکرد Mobile First، استایل‌های پایه بدون Media Query نوشته می‌شود و تغییرات برای صفحات بزرگ‌تر در Media Queries اعمال می‌شوند. مثلاً:

/* استایل موبایل */
.menu {
  display: block;
}

/* استایل دسکتاپ */
@media (min-width: 1025px) {
  .menu {
    display: flex;
  }
}

تفاوت min-width و max-width در Media Queries {#min-width-vs-max-width}

در Media Queries دو رویکرد مهم وجود دارد: استفاده از min-width و max-width.

وقتی از min-width استفاده می‌کنیم، در واقع داریم طراحی را از کوچک‌ترین سایز شروع می‌کنیم و تغییرات را برای سایزهای بزرگ‌تر اضافه می‌کنیم. این همان رویکرد Mobile First است و باعث می‌شود مدیریت استایل‌ها راحت‌تر و بهینه‌تر شود.

مثال استفاده از min-width:

@media (min-width: 768px) {
  .container {
    width: 80%;
  }
}

از طرف دیگر، در رویکرد max-width ابتدا استایل‌ها برای بزرگ‌ترین سایز صفحه نوشته می‌شود و سپس تغییرات برای سایزهای کوچک‌تر اعمال می‌شود.

مثال استفاده از max-width:

@media (max-width: 768px) {
  .container {
    width: 100%;
  }
}

هر دو روش کاربردی هستند، اما امروزه رویکرد min-width محبوب‌تر است، زیرا سازگارتر با Mobile First Design است.

Breakpoints چیست؟ {#breakpoints-چیست}

Breakpoint به نقطه‌ای گفته می‌شود که طراحی سایت در آن تغییر می‌کند تا با اندازه صفحه سازگار شود. مثلاً وقتی صفحه از ۷۶۸ پیکسل کوچکتر می‌شود، ستون‌های سایت کمتر شوند یا منو تغییر کند.

Breakpoints هیچ قانون قطعی ندارند و بستگی به پروژه دارد. اما معمولاً برخی اندازه‌های استاندارد در بین طراحان وب رایج است. به عنوان مثال:

  • موبایل: ≤ 768px
  • تبلت: 769px – 1024px
  • لپ‌تاپ: 1025px – 1440px
  • دسکتاپ بزرگ: > 1440px

شناخت Breakpoints مناسب، کمک می‌کند بتوانیم به‌صورت دقیق‌تر ظاهر سایت را در دستگاه‌های مختلف مدیریت کنیم.

واحدهای ریسپانسیو در CSS {#واحدهای-ریسپانسیو}

در طراحی واکنش‌گرا، استفاده از واحدهای ریسپانسیو بسیار مهم است. به جای استفاده از واحدهای ثابت مثل پیکسل، بهتر است از واحدهایی استفاده کنیم که متناسب با اندازه صفحه تغییر می‌کنند.

برخی از مهم‌ترین واحدهای ریسپانسیو عبارتند از:

  • vw (Viewport Width) که ۱vw برابر با یک درصد از عرض صفحه مرورگر است.
  • vh (Viewport Height) که ۱vh برابر با یک درصد از ارتفاع صفحه مرورگر است.
  • % (درصد) که اندازه‌گیری را نسبت به عنصر والد انجام می‌دهد.
  • rem و em که مقیاس‌پذیر برای فونت و سایر ابعاد هستند.

مثلاً اگر بخواهیم المانی ۸۰ درصد از عرض صفحه را بگیرد، می‌توانیم این‌طور بنویسیم:

.container {
  width: 80vw;
}

استفاده از این واحدها باعث می‌شود طراحی سایت انعطاف‌پذیر و سازگار با دستگاه‌های مختلف باشد.

استفاده‌های مهم از Media Queries در CSS {#استفاده-از-media-queries}

Media Queries در CSS امکانات زیادی در اختیار ما قرار می‌دهند. مثلاً می‌توانیم با کمک آن‌ها Layout صفحه را تغییر دهیم. تصور کن در دسکتاپ سایت سه‌ستونه باشد، اما در موبایل تک‌ستونه شود. برای این کار کافی است از Media Query استفاده کنیم:

@media (max-width: 768px) {
  .grid {
    display: block;
  }
}

همچنین می‌توانیم اندازه فونت‌ها را متناسب با اندازه صفحه تغییر دهیم:

@media (max-width: 1024px) {
  body {
    font-size: 14px;
  }
}

یا حتی المان‌هایی مثل سایدبار را در صفحات کوچک‌تر مخفی کنیم:

@media (max-width: 768px) {
  .sidebar {
    display: none;
  }
}

تست واکنش‌گرایی وب‌سایت {#تست-واکنش-گرایی}

بعد از نوشتن Media Queries، مهم‌ترین کار تست واکنش‌گرایی سایت است. یکی از بهترین ابزارها برای این کار، DevTools مرورگر است. در مرورگرهایی مثل Chrome، Firefox یا Edge می‌توان با فعال کردن Device Toolbar، اندازه صفحه را تغییر داد و بررسی کرد که سایت در موبایل یا تبلت چگونه دیده می‌شود. این ابزار کمک می‌کند سریع مشکلات واکنش‌گرایی را پیدا و برطرف کنیم.

جمع‌بندی

طراحی واکنش‌گرا دیگر یک انتخاب نیست، بلکه یک ضرورت است. امروزه اکثر کاربران از موبایل استفاده می‌کنند و اگر سایتی روی موبایل خوب کار نکند، به‌راحتی کاربران خود را از دست خواهد داد. استفاده از Media Queries، رویکرد Mobile First، انتخاب Breakpoints مناسب و استفاده از واحدهای ریسپانسیو، همه این‌ها کنار هم باعث می‌شوند وب‌سایتی حرفه‌ای و کاربرپسند داشته باشیم. فراموش نکن که بعد از طراحی حتماً سایتت را در ابزارهای مرورگر تست کنی تا مطمئن شوی ظاهر آن در همه دستگاه‌ها عالی است.