مقیاس‌بندی سیال

نمای کلی

مقیاس‌بندی سیال به مؤلفه‌ها اجازه می‌دهد تا نسبت‌های داخلی خود (مانند اندازه قلم و فاصله‌گذاری) را براساس ابعاد فعلی‌شان تنظیم کنند. این کار طراحی منسجم‌تری نسبت‌به جابه‌جایی بین نقاط شکست ثابت ایجاد می‌کند.

درحالی‌که مقیاس‌بندی سیال در گذشته بااستفاده از واحدهای ناحیه نمایش (مقیاس‌بندی براساس اندازه صفحه‌نمایش) انجام می‌شد، واحدهای پُرسمان محفظه مدرن به مؤلفه‌ها اجازه می‌دهند به‌جای آن نسبت به محفظه والد خود مقیاس‌بندی شوند. این کار باعث می‌شود مؤلفه‌ها صرف‌نظر از اینکه در کجای چیدمان قرار می‌گیرند ظاهر خوبی داشته باشند و جداسازی و قابلیت استفاده مجدد مؤلفه‌ها را بهبود می‌بخشد.

پیاده‌سازی

۱. تعریف کردن محتوا

برای استفاده از واحدهای پرسمان محفظه، ابتدا باید بافت محفظه را در عنصر والد تعریف کنید.

.component-wrapper {
  /* Define the container type. Use 'inline-size' for width-based scaling. */
  /* You can also use 'size' for both width and height, but it requires explicit sizing. */
  container-type: inline-size;
  
  /* Optional: Name the container for specific targeting */
  container-name: fluid-card;
}

۲. استفاده از واحدهای پُرسمان محتوا

از واحدهای پُرسمان محتوا (cqi، cqb، و غیره) برای تنظیم اندازه‌ها نسبت به ابعاد محتوا استفاده کنید.

• ‫cqi: ۱٪ از اندازه درون‌خطی ظرف (عرض در حالت‌های نوشتاری افقی).
• ‫cqb: ۱٪ از اندازه بلوک محفظه (ارتفاع در حالت‌های نوشتاری افقی).

توجه: واحدهای محفظه را می‌توان مستقیماً در هر دارایی بدون نیاز به قانون پُرسمان @container استفاده کرد. این خطاها به‌طور خودکار براساس نزدیک‌ترین جد با container-type تعریف‌شده حل‌وفصل می‌شوند.

.component-title {
  /* Scale font size based on container width */
  /* 10cqi means 10% of the container's width */
  font-size: 10cqi;
}

.component-body {
  /* Scale padding based on container width */
  padding: 5cqi;
}

۳. محدود کردن مقادیر با clamp()

برای جلوگیری از خیلی کوچک یا خیلی بزرگ شدن اندازه‌ها، از تابع CSS clamp() استفاده کنید. این امر بر توانایی کاربر برای بزرگ‌نمایی یا تنظیم اندازه قلم پایه تأثیر می‌گذارد. برای اطمینان از اینکه نوشتار با رهنمودهای دسترس‌پذیری مطابقت دارد، حداکثر اندازه نباید بیشتر از ۲٫۵ برابر حداقل اندازه باشد.

.component-title {
  /* Clamp font size between 1rem and 2.5rem, scaling with 5% of container width */
  font-size: clamp(1rem, 5cqi, 2.5rem);
}

راهبردهای جایگزین

اگر مرورگر از پرسمان‌های محفظه پشتیبانی نمی‌کند، باید بااستفاده از واحدهای نمای یا پرسمان‌های رسانه استاندارد، یک جایگزین ارائه دهید.

.component-title {
  /* Fallback for browsers that do not support container units */
  font-size: clamp(1rem, 5vw, 2.5rem);
}

@supports (font-size: 1cqi) {
  .component-title {
    /* Use container units where supported */
    font-size: clamp(1rem, 5cqi, 2.5rem);
  }
}

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