فونت واکنش‌گرا با clamp: کوچک در موبایل، خوانا در دسکتاپ

هدف: اندازهٔ تیتر با عرض صفحه تغییر کند، اما از حداقل خوانا کوچک‌تر و از سقف مشخص بزرگ‌تر نشود.

پیش‌نیاز: یک فایل HTML یا بلوک HTML آزمایشی؛ کلاس اختصاصی practice-title را استفاده کن تا تیترهای دیگر تغییر نکنند.

کد زیر را اجرا کن؛ clamp سه مقدار حداقل، مقدار ترجیحی و حداکثر را دریافت می‌کند.

در مثال، 1.5rem حداقل و 3rem حداکثر است؛ rem به اندازهٔ فونت عنصر ریشه وابسته است.

عبارت 1rem + 2vw بخش متغیر است؛ vw یک درصد از عرض viewport است و با تغییر پنجره تغییر می‌کند.

اگر فونت ریشه ۱۶ پیکسل باشد، در عرض ۳۲۰ پیکسل مقدار ترجیحی ۲۲٫۴ است و حداقل ۲۴ پیکسل انتخاب می‌شود.

در همان فرض، عرض ۸۰۰ پیکسل اندازهٔ ۳۲ پیکسل می‌دهد و در عرض ۱۶۰۰ اندازه در سقف ۴۸ پیکسل می‌ماند.

پنجره را آرام تغییر اندازه بده؛ تیتر باید پیوسته تغییر کند و ناگهان به اندازهٔ دیگری نپرد.

متن تیتر را به یک عبارت فارسی بلند عوض کن؛ line-height و شکستن متن باید از روی‌هم‌افتادن خطوط جلوگیری کنند.

زوم ۲۰۰٪ را امتحان کن؛ ترکیب rem با vw نقطهٔ شروع است، اما خوانایی و بزرگ‌شدن واقعی متن باید عملاً بررسی شود.

در ابزار توسعه مقدار Computed font-size را در سه عرض یادشده بخوان؛ اگر فرق داشت، فونت ریشه یا قواعد قالب را بررسی کن.

معیار موفقیت: تیتر خوانا، بدون بیرون‌زدگی و با محدودیت اندازهٔ روشن؛ این قانون را فقط بعد از آزمایش در صفحهٔ واقعی اعمال کن.

کد کامل تمرین

<h1 class="practice-title">تیتر خوانا در موبایل و دسکتاپ</h1>
<style>
.practice-title {
  font-size:clamp(1.5rem, 1rem + 2vw, 3rem);
  line-height:1.25;
  overflow-wrap:anywhere;
  color:#f4f7fb;
}
</style>

فونت واکنش‌گرا با clamp: کوچک در موبایل، خوانا در دسکتاپ