ریسپانسیو سازی با CSS یعنی چیدمان و محتوا با فضای در دسترس سازگار شوند. هدف فقط کوچک کردن همه عناصر نیست؛ متن باید خوانا بماند، کنترل‌ها قابل استفاده باشند و ترتیب محتوا در موبایل منطقی باشد. طراحی را از عرض کم شروع و با نیاز محتوا گسترش دهید.

تنظیم viewport و ابعاد پایه

تگ viewport باید یک بار در head قالب باشد؛ این قطعه را داخل متن مقاله سایت قرار ندهید:

<meta name="viewport" content="width=device-width, initial-scale=1">

برای جلوگیری از بزرگ شدن ناخواسته جعبه‌ها و خروج تصویر از ستون می‌توانید از پایه زیر استفاده کنید:

*, *::before, *::after { box-sizing: border-box; }
img, video { max-width: 100%; height: auto; }
.container { width: min(100% - 2rem, 72rem); margin-inline: auto; }

ساخت چیدمان انعطاف‌پذیر

در Grid می‌توان تعداد ستون‌ها را به فضای واقعی وابسته کرد. min(100%, 16rem) کمک می‌کند حداقل عرض کارت از والد باریک‌تر نشود:

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 1rem;
}
.card { min-width: 0; overflow-wrap: anywhere; }

Flexbox برای ردیف‌ها و گروه‌های کنترل نیز کاربرد دارد. انتخاب ابزار باید به ساختار چیدمان وابسته باشد، نه نام دستگاه.

استفاده هدفمند از Media Query

نقطه شکست را جایی بگذارید که چیدمان واقعاً به تغییر نیاز دارد. این مثال مقدار عمومی برای تمام سایت‌ها نیست:

.layout { display: grid; gap: 1.5rem; }
@media (min-width: 48rem) {
  .layout { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}

تایپوگرافی و تصاویر

برای متن از اندازه‌های قابل مقیاس مثل rem استفاده کنید و ارتفاع خط مناسب فارسی بگذارید. بارگذاری فونت می‌تواند عرض متن را تغییر دهد؛ فونت سفارشی المنتور را با وزن‌های واقعی و تست موبایل تنظیم کنید. برای تصاویر، علاوه بر اندازه CSS، فایل و srcset مناسب لازم است.

چک‌لیست تست

عرض‌های باریک، بزرگ‌نمایی متن، عنوان بلند و جدول را آزمایش کنید. با صفحه‌کلید هم به دکمه‌ها برسید و نشانگر فوکوس را حفظ کنید. برای فروشگاه، صفحه محصول ووکامرس و گزینه‌های محصول متغیر را روی موبایل بررسی کنید؛ اسکرول افقی ناخواسته و دکمه خارج از صفحه نباید باقی بماند.