ساخت CSS Clamp

با وارد کردن اندازه‌ی حداقل، حداکثر و بازه‌ی viewport، مقدار clamp() برای فونت یا فاصله‌گذاری واکنش‌گرا بسازید.

Aa متن نمونه

اندازه‌ی فعلی: 22.0px

clamp() سه مقدار می‌گیرد: حداقل، مقدار ترجیحی (که بر اساس vw محاسبه می‌شود) و حداکثر. این مقدار برای font-size، padding یا margin واکنش‌گرا بدون media query کاربرد دارد.

ابزار ساخت CSS Clamp مقدار واکنش‌گرا برای فونت و فاصله می‌سازد که خودش با اندازه‌ی صفحه تنظیم می‌شود. طراحی ریسپانسیو بدون مدیا کوئری.

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

تابع clamp باعث می‌شود اندازه‌ها بین یک کف و سقف مشخص، متناسب با عرض صفحه تغییر کنند، بدون نیاز به نوشتن چند مدیا کوئری.

توسعه‌دهندگان فرانت‌اند برای طراحی ریسپانسیو تمیز از این ابزار استفاده می‌کنند. برای ساخت پله‌های اندازه‌ی فونت از ساخت مقیاس تایپوگرافی کمک بگیرید.

سوالات متداول

تابع clamp در CSS چه می‌کند؟

clamp یک مقدار حداقل، یک مقدار دلخواه و یک مقدار حداکثر می‌گیرد و مقدار نهایی را در این بازه و متناسب با صفحه تنظیم می‌کند.

مزیت clamp نسبت به مدیا کوئری چیست؟

با clamp به‌جای چند نقطه‌شکست ثابت، اندازه به‌صورت پیوسته و نرم با عرض صفحه تغییر می‌کند و کد ساده‌تر می‌شود.

واحد vw یعنی چه؟

vw واحدی است برابر یک درصد عرض صفحه‌ی نمایش، که برای مقادیر واکنش‌گرا استفاده می‌شود.

ابزارهای مرتبط

ساخت گرادیان CSSگرادیان خطی یا شعاعی با چند رنگ بسازید و کد CSS آن را کپی کنید.
ساخت سایه CSSبا اسلایدر آفست، بلور، گسترش و رنگ، سایه‌ی دلخواه بسازید و کد CSS آن را کپی کنید.
ساخت افکت شیشه‌ای CSSافکت Glassmorphism (شیشه‌ای مات) با کنترل بلور، شفافیت و حاشیه بسازید.
انتخاب و تبدیل رنگیک ابزار کامل رنگ در چند بخش: انتخاب رنگ و گرفتن کد HEX/RGB/HSL/RGBA، تبدیل بین فرمت‌های رنگ (HEX، RGB، HSL، HSV، CMYK و نام CSS)، و برداشتن رنگ از روی هر پیکسل یک تصویر.
ساخت پالت رنگیاز یک رنگ پایه، پالت‌های مکمل، مشابه، سه‌تایی، چهارتایی و تک‌رنگ بسازید و به‌صورت CSS خروجی بگیرید.
بررسی کنتراست رنگنسبت کنتراست دو رنگ را بر اساس استاندارد WCAG بسنجید و نتیجه‌ی AA/AAA را ببینید.