سازندهی clamp()
اندازهی متن در موبایل و دسکتاپ را بده؛ کد CSS فونت سیال را بگیر و پیشنمایشش را با تغییر عرض ببین.
font-size: clamp(1.5rem, 0.6758rem + 3.5166vw, 3.5rem); طرحت رو بده، کدش رو تحویل بگیر.
—
clamp در CSS چه کار میکند؟
تابع clamp سه مقدار میگیرد: کمینه، مقدار ترجیحی و بیشینه. مقدار نهایی همیشه بین کمینه و بیشینه میماند و در بین این دو، با عرض صفحه تغییر میکند.
چرا برای فونت سیال از clamp استفاده کنیم؟
با یک خط CSS، تیتر در موبایل کوچک و در دسکتاپ بزرگ میشود و دیگر لازم نیست برای هر اندازهی صفحه media query جدا بنویسی.
این مقدار چطور محاسبه میشود؟
شیب خط بین دو نقطهی (عرض کمینه، اندازهی کمینه) و (عرض بیشینه، اندازهی بیشینه) حساب میشود و به ترکیبی از rem و vw تبدیل میشود تا با بزرگنمایی مرورگر هم درست کار کند.
ابزار دیگر: مبدل px به rem · یا طرحت را بده تا کدش کنم