فصل ۴: جادوی موبایل و دسکتاپ

طراحی واکنش‌گرا (Responsive)

۱. اول موبایل، بعد دسکتاپ!

تیلوند از استراتژی Mobile-First استفاده می‌کند. این یعنی کلاس‌هایی که به صورت عادی می‌نویسید (بدون هیچ پیشوندی)، ابتدا روی موبایل اعمال می‌شوند و سپس برای صفحه‌های بزرگتر، تغییر می‌کنند.

برای کنترل نمایشگرهای مختلف، ما از این ۵ “نقطه شکست” (Breakpoints) استفاده می‌کنیم:

پیشوند	اندازه نمایشگر	مناسب برای
sm	640px	موبایل‌های بزرگ / تبلت کوچک
md	768px	تبلت‌ها
lg	1024px	لپ‌تاپ‌ها
xl	1280px	مانیتورهای بزرگ

۲. چطور از این کدها استفاده کنیم؟

فرض کنید می‌خواهید رنگ متن در موبایل قرمز باشد، اما در لپ‌تاپ به آبی تغییر کند. خیلی ساده می‌نویسید:

class=”text-red-500 lg:text-blue-500″

تحلیل ساده: هر کلاسی که قبلش اسم مانیتور (مثلاً lg) و یک دو نقطه بیاید، فقط وقتی فعال می‌شود که نمایشگر به آن اندازه رسیده باشد.

۳. چیدمان ستونی در موبایل و ردیفی در دسکتاپ

یکی از پرکاربردترین کارها در وب، این است که المان‌ها در موبایل زیر هم باشند (ستون) و در دسکتاپ کنار هم (ردیف).

برای این کار از کلاس‌های flex و flex-col استفاده می‌کنیم:

تمرین عملی: ساخت یک بخش ویژگی‌های هوشمند

کد زیر در موبایل ۱ ستونه و در تبلت به بالا ۲ ستونه می‌شود:

<!– Container that changes from 1 column to 2 –>
<div class=”flex flex-col md:flex-row gap-4 p-4“>

  <!– Box 1 –>
  <div class=”bg-amber-500 p-6 rounded-lg flex-1“>Feature A</div>

  <!– Box 2 –>
  <div class=”bg-amber-600 p-6 rounded-lg flex-1“>Feature B</div>

</div>

توضیح کد:
1. flex-col: المان‌ها را در موبایل زیر هم می‌چیند.
2. md:flex-row: وقتی اندازه صفحه به تبلت (md) رسید، آن‌ها را کنار هم می‌چیند.
3. gap-4: بین باکس‌ها فاصله می‌اندازد.

درس قبلی

بازگشت به دوره

درس بعدی