طراحی تعاملی

روال‌های مطلوب کلی

• از پُرسمان‌های @container برای ایجاد چیدمان‌های واکنش‌گرای مؤلفه‌محور استفاده کنید که با اندازه محفظه اصلی خود سازگار می‌شوند، نه با ناحیه نمایش. برای جزئیات بیشتر، به سبک‌بندی حساس به اندازه مراجعه کنید.
• از واحدهای نمای پویای پویا (dvh، dvw) به‌جای vh/vw استفاده کنید تا از شکستگی چیدمان هنگام ظاهر شدن یا ناپدید شدن عناصر میانای کاربر مرورگر تلفن همراه (مانند نوار نشانی) جلوگیری شود.
• از aspect-ratio برای عناصر رسانه (مانند <img> و <video>) استفاده کنید تا فضا درطول بارگیری رزرو شود و از «تغییر چیدمان تجمعی» (CLS) جلوگیری شود.

برای آشنایی با مکانیک چیدمان پشت رابط کاربری واکنش‌گرا (flexbox،‏ grid،‏ container query units،‏ viewport units)، به چیدمان‌های CSS و طراحی واکنش‌گرا مراجعه کنید.

نویسه‌نگاری واکنش‌گرا

• باید واحدهای مرتبط با ناحیه نمایش و مرتبط با قلم را در clamp() برای اندازه‌های قلمی که با اندازه ناحیه نمایش مقیاس‌بندی می‌شوند ترکیب کنید و درعین‌حال مطمئن شوید که در محدوده مطلوب باقی می‌مانند. به‌عنوان مثال، clamp(2rem, 1rem + 5vw, 4rem). نسبت واحدهای مرتبط با نمای هدف و مرتبط با قلم را تنظیم کنید تا سرعت تغییر اندازه قلم را کنترل کنید.
• از vw به‌تنهایی برای اندازه قلم بدون clamp() استفاده نکنید، زیرا می‌تواند نوشتار را در صفحه‌نمایش‌های بسیار بزرگ یا بسیار کوچک بیش‌ازحد بزرگ یا کوچک کند.

برای مقیاس‌بندی نوع و فاصله‌گذاری با ظرف به‌جای نمای دید، به مقیاس‌بندی سیال مراجعه کنید.