Html and Css & Jsآموزش: “؛CSS Clamp — اندازه‌گذاری هوشمند فرمول ساده ؛clamp(کمترین, مقدار_ایده‌…”

؛CSS Clamp — اندازه‌گذاری هوشمند

فرمول ساده

؛clamp(کمترین, مقدار_ایده‌آل, بیشترین)
مثل یه کش لاستیکی عمل می‌کنه:

🟢 اگه خیلی کوچیک شد → به کمترین حد می‌رسه

🔴 اگه خیلی بزرگ شد → به بیشترین حد می‌رسه

🟡 در حالت عادی → اندازه ایده‌آل رو داره

مثال تصویر

width: clamp(300px, 50%, 800px);صفحه نمایش۵۰٪نتیجه📱 کوچک (400px)200px300px (کمترین)💻 بزرگ (1400px)700px700px (ایده‌آل)🖥️ خیلی بزرگ (2000px)1000px800px (بیشترین)

کجا استفاده می‌شه؟

۱. سایز فونت responsive
/* بهترین روش برای فونت‌های واکنش‌گرا */
font-size: clamp(16px, 2.5vw, 32px);

موبایل: 16px

دسکتاپ: 32px

بینشون: بر اساس عرض صفحه

۲. عرض کارت‌ها

.card {
width: clamp(280px, 90%, 1200px);
}

۳. فاصله‌ها (padding/margin)

padding: clamp(1rem, 3vw, 3rem);

۴. ارتفاع هدر

height: clamp(60px, 10vh, 120px);

مقایسه با روش‌های قدیمی

قبلاً باید اینطوری می‌نوشتی:
/* ۱۰ خط کد با media query */

.title {
font-size: 16px;
}
@media (min-width: 768px) {
.title { font-size: 24px; }
}
@media (min-width: 1200px) {
.title { font-size: 32px; }
}

حالا فقط یه خط:

.title {
font-size: clamp(16px, 4vw, 32px);
}

🎉 همین! تمیزتر، سریع‌تر، بدون media query.

نکات مهم ⚠️

۱. ترتیب مهمه!
/* ✅ درست */

clamp(MIN, PREFERRED, MAX)

/* ❌ غلط */

clamp(MAX, PREFERRED, MIN)

۲. می‌تونی ترکیب واحد استفاده کنی

font-size: clamp(1rem, 2.5vw + 0.5rem, 3rem);

۳. پشتیبانی مرورگرها

✅ Chrome, Firefox, Safari, Edge (نسخه‌های جدید)

یه مثال کامل و کاربردی

.hero {
/* عنوان اصلی */
font-size: clamp(2rem, 5vw, 4.5rem);

/* زیرعنوان */
padding: clamp(1rem, 3vw, 2rem);

/* عرض کلی */
max-width: clamp(320px, 90%, 1400px);

/* فاصله داخلی */
margin: clamp(2rem, 5vh, 5rem) auto;
}

💎 @Htmlcss_channels | #HTML #css #JavaScript